小兔网

css设置transform的语法是“transform: none|transform-functions;”,该属性可以对元素进行旋转、缩放、移动或倾斜。

css怎么设置transform

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

css怎么设置transform?

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法

transform: none|transform-functions;

css怎么设置transform

代码示例:

<!DOCTYPE html><html><head><style> body{margin:30px;background-color:#E9E9E9;}div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:white;/* Add box-shadow */box-shadow:2px 2px 3px #aaaaaa;}div.rotate_left{float:left;-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari and Chrome */-o-transform:rotate(7deg); /* Opera */transform:rotate(7deg);}div.rotate_right{float:left;-ms-transform:rotate(-8deg); /* IE 9 */-moz-transform:rotate(-8deg); /* Firefox */-webkit-transform:rotate(-8deg); /* Safari and Chrome */-o-transform:rotate(-8deg); /* Opera */transform:rotate(-8deg);}</style></head><body><div class="polaroid rotate_left"><img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" /><p class="caption">上海鲜花港的郁金香,花名:Ballade Dream。</p></div><div class="polaroid rotate_right"><img src="/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" /><p class="caption">2010年上海世博会,中国馆。</p></div></body></html>

效果:

css怎么设置transform

推荐:《HTML视频教程》《css视频教程

以上就是css怎么设置transform的知识。速戳>>知识兔学习精品课!