本文主要是介绍CSS3 3D 转换——实现透明多色正方体，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
CSS3 3D转换
上篇文章分享了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轴缩放 | 代表缩放比例，取值包括正数、负数和小数 |
| scaleZ(z) | 沿着z轴缩放 | 代表缩放比例，取值包括正数、负数和小数 |
| translate3d(x,y,z) | 定义3D转化 | 元素移动的数值 |
| translateX(x） | 仅用于x轴的值 | 元素移动的数值 |
| translateY(y) | 仅用于y轴的值 | 元素移动的数值 |
| translateY(z) | 仅用于z轴的值 | 元素移动的数值 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n） | 3D转换矩阵 | 使用16个值的4x4矩阵。所有变形的本质都是由矩阵完成的 |
| perspective(n) | 定义3D转换元素的透视视图 | 一个代表透视深度的数值 |
由于电脑屏幕是二维平面，表中的perspective属性就是用于实现视觉上的3D效果。
接下来，我们看一个典型的例子一透明多色立方体，具体代码如下：
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>3D转换</title><style>body {margin:0;padding:0;background-color:#E7F7F7;}.box {width:200px;height:200px;text-align:center;line-height:200px;font-size:24px;margin:100px auto;position:relative;perspective:1000px;transform-style:preserve-3d; //定义子元素保留3D位置transform:rotateX(-30deg) rotateY(30deg);}.front, .back, .left, .right, .top ,.bottom {position: absolute;width:100%;height:100%;left:0;top:0;opacity:0.5;}.front {background-color: pink;transform: translateZ(100px);}.left {background-color: green;transform: rotateY(90deg) translateZ(-100px);}.right {background-color: red;transform: rotateY(-90deg) translateZ(-100px);}.top {background-color: blue;transform: rotateX(90deg) translateZ(100px);}.bottom {background-color: yellow;transform: rotateX(-90deg) translateZ(100px);}.back {background-color: purple;transform: translateZ(-100px);}</style></head><body><div class="box"><div class="front">front</div><div class= "back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div></div></body></html>
用浏览器打开,页面效果如图所示：
在上述中,我们给".box" 这个div元素设置了perspective透视，不做透视设置是无法实现立方体效
果的;另外，还使用了transform-style: preserve-3d属性，用于定义子元素保留3D位置，如果
不做此项设置，该立方体会是扁的。
动手操作一下吧！
这篇关于CSS3 3D 转换——实现透明多色正方体的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
