文章目录
transform: translate3d(x, y, z)
语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值(正负均可)
- 像素单位数值
- 百分比
使用perspective属性实现透视效果
transform: rotateXYZ实现元素空间旋转效果
- transform: rotateZ(值);
- transform: rotateX(值);
- transform: rotateY(值);
空间旋转-Z轴
空间旋转-X轴:需配上透视效果
空间旋转-Y轴:需配上透视效果
- rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
- x,y,z 取值为0-1之间的数字
transform-style: preserve-3d呈现立体图形
- 父元素添加
transform-style: preserve-3d;
- 使子元素处于真正的3d空间
实现立体cube
scale实现空间缩放效果
- transform: scaleX(倍数);
- transform: scaleY(倍数);
- transform: scaleZ(倍数);
- transform: scale3d(x, y, z)