6-2三维变形
三维旋转
transform: rotateX(45deg);
鼠标移入后围绕X轴旋转45度
transform: rotateY(45deg);
鼠标移入后围绕y轴旋转45度
transform: rotateZ(45deg);
鼠标移入后围绕z轴旋转45度
三维缩放
transform:rotateY(-15deg);
transform: scaleX(1.5)
rotateY(-15deg);
鼠标移入后转动并x方向放大到1.5倍
transform: scaleY(1.5)
rotateY(-15deg);
鼠标移入后转动并y方向放大到1.5倍
transform: scaleZ(2)
rotateY(-15deg);
鼠标移入后转动并z方向应该放大到2倍
三维倾斜
不存在z轴的倾斜,所以没有transform: skewZ(30deg)这样的值
transform: skewX(30deg);
鼠标移入后沿着x方向倾斜30度
transform: skewY(30deg);
鼠标移入后沿着y方向倾斜30度
三维平移
transform: translateX(100px);
鼠标移入后沿着x方向平移100像素
transform: translateY(100px);
鼠标移入后沿着y方向平移100像素
transform: translateZ(100px);
鼠标移入后沿着y方向平移100像素