使用 CSS3 实现酷炫的 3D 旋转透视

3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css33D动画必不可少。

一、CSS3 3D 转换的常用API介绍

1. 旋转

• rotateX()

• rotateY()

• rotateZ()以上几个api分别代表绕x，y，z轴旋转

相关代码如下：
`

复制代码`

2. 位移（Transform）

• translateX(x) 定义 3D 转化，仅使用用于 X 轴的值

• translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值

• translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值以上几个api分别代表相对x，y，z轴的位移

这里我们需要注意的是为了能看出位移的效果，我们需要在父容器上加如下属性：

.d3-wrap {
   
    transform-style: preserve-3d;
    perspective: 500;
    /* 设置元素被查看位置的视图 */
    -webkit-perspective: 500;
}
复制代码

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。代码如下：

.d3-wrap {
   
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    perspective: 500;
    -webkit-perspective: 500;
    transform: rotateX(0) rotateY(45deg);
    transform-origin: center center;
}

.transformZ {
   
    width: 200px;
    height: 200px;
    background-color: #06c;
    transition: transform 2s;
    animation: transformZ 6s infinite;
}