css中3d转换 |css 角标 resize

/* 旋转 */
transform: rotateX(90deg); /*绕x轴旋转90度*/
transform: rotateY(90deg); /*绕y轴旋转90度*/
transform: rotateZ(90deg); /*绕z轴旋转90度*/
/* 平移 */
transform: translateX(50px); /*将元素在x轴上平移50个像素*/
transform: translateY(-50px); /*将元素在y轴上平移50个像素*/
transform: translateZ(50px); /*将元素在z轴上平移50个像素*/
/* 缩放 */
transform: scaleX(2); /*将元素在x轴上放大两倍*/
transform: scaleY(0.5); /*将元素在y轴上缩小一半*/
transform: scaleZ(3); /*将元素在z轴上放大三倍*/

上面的代码中，大家可以看到，使用3D转换主要是通过CSS的transform属性来实现的，其中rotateX/Y/Z表示绕x轴、y轴和z轴旋转，translateX/Y/Z表示在x轴、y轴和z轴上平移，scale表示缩放。除此之外，也可以通过使用perspective属性来设置元素到视角的距离，从而改变元素的观察效果，例如：

/* 设置元素到视角的距离为800像素 */
perspective: 800px;

除此之外，大家还可以使用transform-style属性来设置转换元素的子元素的转换方式，preserve-3d表示继承父元素的3D效果，例如：

/* 设置元素和其子元素在3D空间中具有相同的透视效果 */
transform-style: preserve-3d;

最后，值得注意的是，3D转换在一些老的浏览器（如IE9及以下版本）中可能不被支持，建议在使用时考虑兼容性问题。