css3 里面的动画——2d、3d动画

最新推荐文章于 2023-03-02 14:16:19 发布

原创最新推荐文章于 2023-03-02 14:16:19 发布 · 363 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS的transform属性实现2D到3D动画的转变，包括平移、旋转、缩放和倾斜等操作，并展示了如何通过@keyframes创建动画效果，最后通过一个实例展示了2D球体如何转变为3D并添加动画。

1.2d 动画

属性：

transform	适用于2D或3D转换的元素
transform-origin	允许更改转换元素位置

转换方法：

matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

2.3d 动画

属性：

transform	向元素应用2D或3D转换
transform-origin	允许改变被转换元素的位置
transform-style	规定被嵌套元素在3D空间中如何显示
perspective	规定3D元素透视效果
perspective	规定3D元素底部位置
backface-visibility	定义元素在不面对屏幕时是否可见

转换方法：

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用16个值的矩阵。
translate3d(x,y,z)	定义 3D 转换
translateX(x)	定义 3D 转换，仅使用用于X轴的值。
translateY(y)	定义 3D 转换，仅使用用于Y 轴的值。
translatez(n)	定义3D转换，仅使用用于Z轴的值。
scale3d(x,y，z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个X轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个Y轴的值。
scalez(z)	定义3D缩放转换，通过给定一个z轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转.
rotateX(angle)	定义沿X轴的3D转换。
rotateY(angle)	定义沿Y轴的3D转换。
rotateZ(angle)	定义沿Z轴的3D转换。
perspective(n)	定义3D转换元素的透视视图。

属性解释：

transform （2d、3d转换）
translate(平移x,y,z)  
rotate(旋转x,y,z)  
skew(变形 deg)  
scale(伸缩 w,h)
translate 默认x
rotate 默认旋转z轴为旋转中心

3.创建动画

@keyframes属性：animation

下面我们来展示一个实例：

（1）创建一个视觉上的2d球体

<body>
  <div class="sqpar">
      <div class="sq sq1"></div>
      <div class="sq sq2"></div>
      <div class="sq sq3"></div>
      <div class="sq sq4"></div>
      <div class="sq sq5"></div>
      <div class="sq sq6"></div>
      <div class="sq sq7"></div>
      <div class="sq sq8"></div>
  </div>
</body>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {

            width: 100%;
            height: 100%;
            background: black;
        }
        .sq{
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            border: 1px dashed #fff;
        }/*给到统一样式将形状变成圆环。*/
        
        .sq2{
            transform: rotatey(30deg);/*绕y轴旋转30度*/
        }
        .sq3{
            transform: rotatey(60deg);/*绕y轴旋转60度*/
        }
        .sq4{
            transform: rotatey(90deg);/*绕y轴旋转90度*/
        }
        .sq5{
            transform: rotatey(120deg);/*绕y轴旋转120度*/
        }
        .sq6{
            transform: rotatey(150deg);/*绕y轴旋转150度*/
        }
</style>

效果展示：

（2）2d效果转为3d效果

在sqpar样式中添加代码：
.sqpar{
            transform-style:preserve-3d;  /*2d转3d*/
        }

（3）创建动画效果

.sqpar{
            animation: sq_animate 3s linear infinite;            
        }
@keyframes sq_animate {
            from {
                transform: rotatey(0deg);
            }
            to{
                transform: rotatey(360deg);
            }
        }

注意：@keyframes 设置的便是动画效果，若想给哪个对象加上该效果，则用admition属性，其后加上@keyframes同名样式名，如上代码中的sq_animate.

经过上述3步，一个转动的框架球就出现啦。效果如下（静态图是有些看不粗来~~~）