1.transform 2D转换
共有如下2D转换方法:
- translate()
- rotate()
- scale()
- skew()
- matrix()
(1).translate()方法
语法:translate(xpx,ypx),即把元素从左向右移动 x 个像素,从上向下移动 y 个像素。
例:transform: translate(50px,100px);
则元素从左侧移动 50 像素,从顶端移动 100 像素。
(2).rotate()方法
语法:rotate(xdeg),如果 x 为正值,则把元素顺时针旋转 x 度,如果 x 为负值,则把元素逆时针旋转 x 度。
例:transform: rotate(30deg);
则元素顺时针旋转 30 度。
(3).scale()方法
语法:scale(x,y),即把宽度转换为原始尺寸的 x 倍,把高度转换为原始高度的 y 倍。
例:transform: scale(2,4);
宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
(4).skew()方法
语法:skew(xdeg,ydeg) ,即把元素围绕 X 轴把元素翻转 x 度,围绕 Y 轴翻转 y 度。
例:transform: skew(30deg,20deg);
围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
(5).matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
2.transform 3D转换
rotateX() 方法
语法:rotateX(xdeg);即沿着 X 轴向里翻转 x 度
例:
<style>
div {
width: 100px;
height: 100px;
background-color: #ccffff;
}
.box1 {
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div>这是一个 div 元素</div>
<div class="box1">这是一个旋转后的 div 元素</div>
</body>
实际效果如下
rotateY(),rotateZ()和rotateX()一样,只不过是沿Y轴旋转(这里的Y轴是向下的)
rotate3d()方法
语法:rotate3d(x,y,z,angle)
元素旋转的角度由rotate3d()函数的第四个参数来决定,它是一个值。rotate3d()函数的前三个参数用于决定各个轴的旋转方向。正值表示顺时针旋转,负值表示逆时针旋转。
transform: rotate3d(1, 0, 0, 45deg); /* 绕X轴顺时针旋转45度 */
transform: rotate3d(0, 1, 0, 45deg); /* 绕Y轴顺时针旋转45度 */
transform: rotate3d(0, 0, 1, 45deg); /* 绕Z轴顺时针旋转45度 */
transform: rotate3d(0, 0, 0, 50deg); /* 不会发生旋转 */
scale3d(x,y,z),scaleX(x),scaleY(y),scaleZ(z)方法
x,y,z初始值为1;
scaleX(x),沿x轴变成之前的x倍;
scaleY(y),沿y轴变成之前的y倍;
scaleZ(z),沿z轴变成之前的z倍;
scale3d(x,y,z),当scale3d()中x和y值同时为1,即scale3d(1,1,z),其效果等同于scaleZ(z)。