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像素