CSS3手把手教你实现3D动画

Posted 2021-04-09 太合音乐技术团队

阅读本篇文章预计5分钟

前言

本文主要介绍简单动画的实现，手把手教你写个动画，面向小白和没有前端开发经验的童鞋，如果你有前端开发经验那么恭喜你，只要花费2分钟就能复习一下啦

正文从这里开始了~~

先上效果

想实现它么，只要40行代码轻松搞定，在上代码之前我们先简单学习一下相关知识点，之后介绍一下我的实现思路和代码show，文章底部还提供了在线编辑器的链接。

你需要了解的知识点

1.知识点大纲

• transform

• translate

• rotate

• scale

• skew

• animation

• @keyframes

transform-functions包括translate（平移） rotate(旋转) scale(放大缩小)skew(倾斜)animation(动画)@keyframes(关键帧)

2.知识点详解

transform语法及使用

• transform: none|transform-functions;

• 解释：变换，变形等

无transform属性，初始化的样式，如下图

四个属性值 translate（数值px）移动，有XYZ三个方向，可以理解为平衡移动，例如：

rorate（角度deg）旋转，有XYZ三个方向，可以理解为坐标系与其内部平面一同旋转，例如：

scale（缩放倍数X, 缩放倍数Y）缩放，有XY两个方向，可以理解为X和Y缩放相应倍数，例如： 

 skew（角度deg）倾斜，有XY两个方向，可以理解为当skewX(45deg)此时高度不变，y轴逆时针旋转45°；当skewY(30deg)此时宽度不变，x轴顺时针旋转30°；例如： 

animation语法

• animation: name duration timing-function delay iteration-count direction;

• 解释: animation是一个简写属性，它有六个值搭配@keyframes使用。默认值：none 0 ease 0 1 normal

六个值动画属性：

 
   
   
 

  
    
    
  
    1.name 需要绑定到选择器的 keyframe 名称。
  
    
    
  
    2.duration    完成动画所花费的时间，以秒或毫秒计。
  
    
    
  
    3.timing-function 动画的速度曲线。
  
    
    
  
    4.delay    在动画开始之前的延迟时间。
  
    
    
  
    5.iteration-count 动画播放的次数。
  
    
    
  
    6.direction    是否应该轮流反向播放动画。
 
   
   
 

@keyframes语法

@keyframes animationname {keyframes-selector {css-styles;}}

 
   
   
 

  
    
    
  
两种使用方法：
  
    
    
  
1.百分比0-100%
  
    
    
  
2.from与to用法
  
    
    
  
  from (和0%相同)
  
    
    
  
  to (和100%相同)
  
    
    
  

  
    
    
  
//第二种方法举个例子，第一种方法稍后会在代码里实现
  
    
    
  
from{
  
    
    
  
    -webkit-transform:rotateX(-33.5deg)
  
    
    
  
     rotateY(45deg);
  
    
    
  
    }
  
    
    
  
 to{
  
    
    
  
     -webkit-transform:rotateX(-33.5deg)
  
    
    
  
     rotateY(405deg);
  
    
    
  
    }
 
   
   
 

3.实现思路

确认初始坐标系，在3维直角坐标系中，X轴正方向为水平向右，Y轴正方向为垂直X轴向上，Z轴正方向为垂直X轴和Y轴所在平面指向我们眼睛。如下图： 

首先，确认前后两个面，直接沿着Z轴正负方向将两个平面分别平移100px,可以得到前后两个面； 其次，确认上下两个面，将直角坐标系沿着当前X轴正方向旋转90°得到一个Z轴向上，y轴正方向向原Z轴相反方向的坐标系，如下图：此时 沿Z轴正负两个方向将两个平面分别平移100px，可以得到上下两个面； 

 最后，确认左右两个面，回到初始坐标系，将直角坐标系沿着当前Y轴正方向旋转90°得到一个Z轴向左，X轴正方向与原Z轴方向相同的坐标系，如下图：此时 沿Z轴正负两个方向将两个平面分别平移100px，可以得到左右两个面； 

总结：旋转的坐标系是这里的难点，当然对于rotate()也可以有其他的理解方式，我的理解是目前我接触到的最容易理解的方式，如果你有其他的理解方式，欢迎前来交流。

最后附上我的实现代码

html代码

 
   
   
 

  
    
    
  
<div class="wrap">
  
    
    
  
    <div class="common forward">1</div>//前面
  
    
    
  
    <div class="common back">2</div>//后面
  
    
    
  
    <div class="common left">3</div>//左面
  
    
    
  
    <div class="common right">4</div>//右面
  
    
    
  
    <div class="common top">5</div>//上面
  
    
    
  
    <div class="common bottom">6</div>//下面
  
    
    
  
</div>
 
   
   
 

CSS代码

 
   
   
 

  
    
    
  
.wrap{
  
    
    
  
    width: 200px;
  
    
    
  
    height: 200px;
  
    
    
  
    margin:100px auto;
  
    
    
  
    position: relative;
  
    
    
  
    margin-left: -100px;
  
    
    
  
    left: 50%;
  
    
    
  
    /*确认3D动画*/
  
    
    
  
    transform-style: preserve-3d;
  
    
    
  
    /*旋转*/
  
    
    
  
    transform: rotateY(-30deg) rotateX(57deg);
  
    
    
  
    /*动画*/
  
    
    
  
    -webkit-animation:circle 8s linear 0s infinite normal;
  
    
    
  
    -moz-animation:circle 8s linear 0s infinite normal;
  
    
    
  
}
  
    
    
  
.common{
  
    
    
  
    width: 200px;
  
    
    
  
    height: 200px;
  
    
    
  
    border:1px solid black;
  
    
    
  
    font-size: 30px;
  
    
    
  
    position: absolute;
  
    
    
  
    opacity: .5;
  
    
    
  
}
  
    
    
  
.forward{
  
    
    
  
    transform: translateZ(100px);
  
    
    
  
    background-color: red;
  
    
    
  
}
  
    
    
  
.back{
  
    
    
  
    transform: translateZ(-100px);
  
    
    
  
    background-color: yellow;
  
    
    
  
}
  
    
    
  
.top{
  
    
    
  
    transform: rotateX(90deg) translateZ(100px);
  
    
    
  
    background-color: green;
  
    
    
  
}
  
    
    
  
.bottom{
  
    
    
  
    transform: rotateX(90deg) translateZ(-100px);
  
    
    
  
    background-color: blue;
  
    
    
  
}
  
    
    
  
.left{
  
    
    
  
    transform: rotateY(90deg) translateZ(-100px);
  
    
    
  
    background-color: pink;
  
    
    
  
}
  
    
    
  
.right{
  
    
    
  
    transform: rotateY(90deg) translateZ(100px);
  
    
    
  
    background-color: #f40;
  
    
    
  
}
  
    
    
  
@keyframes circle{
  
    
    
  
    20%{
  
    
    
  
        transform:rotateX(-33.5deg) rotateY(45deg);
  
    
    
  
    }
  
    
    
  
    50%{
  
    
    
  
        transform:rotateX(-45deg) rotateY(70deg);
  
    
    
  
    }
  
    
    
  
    80%{
  
    
    
  
        transform:rotateX(0deg) rotateY(-45deg);
  
    
    
  
    }
  
    
    
  
    100%{
  
    
    
  
        transform:rotateX(180deg) rotateY(45deg);
  
    
    
  
    }
  
    
    
  
}
 
   
   
 

在线编辑器以及实际演示效果，请复制以下链接访问！

https://jsfiddle.net/yutingtaihecom/nmasyt96/2/

作者Anny 邮箱：[e-mail]