CSS3如何实现旋转变换

原创
|
浏览：7711
|
更新：2017-10-25 17:20

分步阅读

css3的变换（transform）属性主要有两个作用：

1、构建一些css2中难以构造的图形，把一些有ps做的工作交个浏览器渲染本身；

2、配合JavaScript制作更为丰富的动画。

transform的兼容性如下：

ie10、Firefox、Opera支持transform属性

ie9支持替代的-ms-transform属性（仅适用于2D转换）

Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）

Opera值支持2D转换

工具/原料

网页编辑器
浏览器（具备调试功能）

CSS3旋转变换

1
transform属性有很多选项，rotate是比较常用的一种，rotate英文是轮转、回转的意思，在css3中用于元素的旋转，其基本语法：
transform：rotate（角度值）；
为rotate传入一个角度值作为参数，元素将圆中轴线顺时针偏转这个角度值
例子：
css部分：
.div1{
width:200px;
height:200px;
border:2px solid firebrick;
margin:50px auto;
text-align: center;
line-height: 200px;
}
.div2{
width:200px;
height:200px;
border:2px solid firebrick;
margin:50px auto;
text-align: center;
line-height: 200px;
transform:rotate(10deg);
}
html部分：
<div class="div1">旋转变换示例</div>
<div class="div2">简单的2D旋转</div>
效果如图：
2
用rotateX（角度值）则表示沿X轴方向上旋转
例子：
css部分：
.div3{
width:200px;
height:200px;
border:2px solid cadetblue;
margin:50px auto;
text-align: center;
line-height: 200px;
transform:rotateX(60deg);
}
html部分：
<div class="div3">沿x轴方向上旋转</div>
效果如图：
3
同样的，用rotateY（角度值）则表示沿Y轴方向上旋转
例子：
css部分：
.div4{
width:200px;
height:200px;
border:2px solid cadetblue;
margin:50px auto;
text-align: center;
line-height: 200px;
transform:rotateY(60deg);
}
html部分：
<div class="div4">沿y轴方向上旋转</div>
效果如图：
4
rotateZ（角度值）等效于rotate（角度值）
例子：
css部分：
.div5,.div6{
width:200px;
height:200px;
border:2px solid cadetblue;
margin:50px auto;
text-align: center;
line-height: 200px;
}
.div5{
transform:rotateZ(60deg);
}
.div6{
transform:rotate(60deg);
}
html部分：
<div class="div5">沿z轴方向上旋转</div>
<div class="div6">rotate旋转示例</div>
效果如图：
5
如果需要在其他向量上运用旋转，可以使用rotate3d(x,y,z,deg)，编辑x,y,z的值构建三维向量，最后一个参数值是旋转的角度。
例子：
css部分：
.div7,.div8,.div9,.div10,.div11{
width:200px;
height:200px;
border:2px solid cadetblue;
margin:50px auto;
text-align: center;
line-height: 200px;
}
.div7{
transform:rotate3d(0,0,0,60deg)
}
.div8{
transform:rotate3d(1,0,0,60deg)
}
.div9{
transform:rotate3d(0,1,0,60deg)
}
.div10{
transform:rotate3d(0,0,1,60deg)
}
.div11{
transform:rotate3d(1,-1,-1,60deg)
}
html部分：
<div class="div7">三维向量3d旋转0</div>
<div class="div8">三维向量3d旋转x</div>
<div class="div9">三维向量3d旋转y</div>
<div class="div10">三维向量3d旋转z</div>
<div class="div11">三维向量3d旋转x,y,z</div>
效果如图：
5
此文章未经授权抓取自百度经验
6
注意，transform的兼容性，具体代码如下：
transform:rotate(10deg);/*标准*/
-ms-transform:rotate(10deg);/*ie9*/
-moz-transform:rotate(10deg);/*fireFox*/
-webkit-transform:rotate(10deg);/*Safari、Chrome*/
-o-transform:rotate(10deg);/*Opera*/
END