3D旋转
transform: rotate3D(x,y,z,deg);
x,y,z 是一个0/1的数值,0表示不旋转,1表示旋转,deg表示旋转的角度
.box {
transform: rotate3D(1,1,1,180deg);
}
- rorateX,X轴旋转
- rorateY,Y轴旋转
- rorateZ, Z轴旋转
.box:hover {
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
}
旋转的方向:左手法则
**左手法则:**左手握住旋转轴,大拇指指向旋转的正方向,其他手指的卷曲方向就是旋转的正方向。
3D位移
transform: translate3d(x,y,z);
.box:hover{
transform: translate3d(100px,100px,0px);
}
- transform: translateX(); //沿着x轴移动
- transform: translateY();//沿着Y轴移动
- transform: translateZ();//沿着Z轴移动
.box {
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
}
透视
透视:
- 设置给变换盒子的父容器。
- 设置用户眼睛与屏幕的距离。
- 透视效果只是视觉上的呈现,不是真正的距离。
body {
perspective: 200px;
}
perspective 透视:
- translateZ为正值,perspective值越小,盒子与你的距离越近,看到的效果也就越大。
- translateZ为0,perspective不管怎么变化,盒子上的阴影不变,看到的效果不变。
- translateZ为负值,perspective值越小,盒子与你的距离越近,看到的效果也就越小。