CSS3 3D 转换——实现透明多色正方体_一、填空题3、既然支持z轴的偏移,那么transform支持3d变形非常方便。3d变形-优快云博客

本文链接：https://blog.youkuaiyun.com/Shmily_ox/article/details/105056114

本文介绍了CSS3的3D转换，包括围绕x、y、z轴的旋转，并通过一个实例展示了如何创建透明多色的立方体效果。重点讲解了透视设置和`preserve-3d`属性在实现3D立方体中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上篇文章分享了2D 转换，那么今天就来了解一下3D转换。

既然transform- -origin支持Z轴的偏移，那么transform 支持3D变形也是理所当然的事情。3D变形是

指某个元素围绕其x轴、y轴、z轴进行旋转。

3D转换的常用函数

函数名	描述	参数说明
rotate3d(x,y,z,angel)	定义3D旋转	前3个值用于判断需要旋转的轴，旋转轴的值设置为1,否则为0, angel 代表元素旋转的角度
rotateX(angel)	沿着x轴3D旋转	前3个值用于判断需要旋转的轴，旋转轴的值设置为1,否则为0, angel 代表元素旋转的角度
rotateY(angel)	沿着y轴3D旋转	前3个值用于判断需要旋转的轴，旋转轴的值设置为1,否则为0, angel 代表元素旋转的角度
rotate Z(angel)	沿着z轴3D旋转	前3个值用于判断需要旋转的轴，旋转轴的值设置为1,否则为0, angel 代表元素旋转的角度
scale3d(x,y,z)	定义3D缩放	代表缩放比例，取值包括正数、负数和小数
scaleX(x)	沿着x轴缩放	代表缩放比例，取值包括正数、负数和小数
scaleY(y)	沿着y轴缩放	代表缩放比例，取值包括正数、负数和小数
scal