转换是css3中新增的一个特性。可以实现元素的位移,旋转,缩放,变形。
2D转换
1.缩放:scale
/* 第一种写法 n 表示缩放的倍数,n大于1表示放大,n小于1表示缩小。*/
transform:scale(n);
/* 第二种写法 x 表示水平方向上的缩放倍数,y表示垂直方向上的缩放倍数。*/
transform:scale(x,y);
2.位移:translate(重点)
/* 参数可以为px,百分比 */
transform:translate(水平位移,垂直位移);
说明:取值为正数,向下或向右移动。取值如果为负数,则向上或向左移动。
3.旋转:rotate
/* 角度的单位为deg 正值为顺时针,负值为逆时针 */
transform:rotate(角度)
4.倾斜:skew(了解)
/* 单位为deg 正值为顺时针,负值为逆时针 */
transform:skew(水平方向倾斜角度,垂直方向倾斜角度)
5.注意事项
-
转换操作不会影响其他元素的位置。
-
只能添加给块元素,不能添加给行内元素。
-
可以添加多个转换效果,会先执行前面的,再执行后面的。
3D转换
左手法则(了解):用左手握住旋转轴,大拇指朝向正方向。其他四个手指卷曲的方向就是旋转的正方向。
1.3D位移:translate(重点)
/* 横坐标位移 */
transform:translateX(n);
/* 纵坐标位移 */
transform:translateY(n);
/* Z轴位移 */
transform:translateZ(n);
2.3D旋转:rotate
/* 沿X轴旋转100deg */
transform:rotateX(100deg)
/* 沿Y轴旋转100deg */
transform:rotateY(100deg)
/* 沿Z轴旋100deg */
transform:rotateZ(100deg)
3.3D呈现
因为电脑屏幕是平面的,所以如果希望看到3D的过渡效果,需要给转换元素的父盒子添加以下属性
/* 设置父盒子为3D效果 */
transform-style: preserve-3d;
/* 设置视距 */
perspective: 500px;