玩转CSS动画及3D正方体

版权声明：本文为博主原创文章，未经博主允许不得转载。（github:KuanG97） https://blog.csdn.net/m0_37136491/article/details/82253350

目录

---

目标实现正方体的效果

Transition

理解

transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

transition-timing-function的参数如下图

以上使用到的css部分代码理解

transition-timing-function:
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

.block {
  width: 40px;
  height: 40px;
  margin-top: 15px;
  background: #3399ff;
}
.block:hover {
  width: 500px;
  background: red;
}
.block1 {
  -webkit-transition-property: all;//规定设置过渡效果的 CSS 属性的名称为all，即全部的变化
  -moz-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 1.2s;//完成过渡效果的时间。
     -moz-transition-duration: 1.2s;
          transition-duration: 1.2s;
  -webkit-transition-timing-function: linear;//定速度效果的速度曲线为线性，即匀速。
     -moz-transition-timing-function: linear;
          transition-timing-function: linear;
}

浏览器查看或者尝试修改贝塞斯曲线

---

3D场景

perspective人看东西的距离
perspective-origin观察视点。此处默认为视图的中心点
transform-style 规定被嵌套元素如何在 3D 空间中显示。

translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。

rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

扫描二维码关注公众号，回复： 3067525 查看本文章

以上使用到的代码

HTML

<h1>02#3D场景使用属性：perspective</h1>
    <div class="ex">
        <div id="block3d">
        </div>
    </div>
    <div class="input">
        <p>rotate x: <span id="x">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatex" value="0" onchange="rotate()" />
        <br/>
        <p>rotate y: <span id="y">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatey" value="0" onchange="rotate()" />
        <br/>
        <p>rotate z: <span id="z">0</span> deg</p>
        <input type="range" min="-360" max="360" id="rotatez" value="0" onchange="rotate()" />
        <br/>
    </div>

CSS

.ex {
  //我看到的事物距离我800px
  perspective: 800px;
  //此处默认为视图的中心点，即x为50%，y50%的位置
  perspective-origin: 50% 50%;
  //将该场景设置为3D，其子元素都为3D场景中
  transform-style: preserve-3d;
}
#block3d {
  width: 250px;
  height: 250px;
  background: #3399ff;
  margin: 100px auto;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0);
}
.input {
  width: 80%;
  margin: 15px auto;
}
.input input {
  width: 100%;
}

JS

function rotate(){
    var x = document.getElementById("rotatex").value;
    var y = document.getElementById("rotatey").value;
    var z = document.getElementById("rotatez").value;
    document.getElementById('block3d').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

    document.getElementById('x').innerText = x;
    document.getElementById('y').innerText = y;
    document.getElementById('z').innerText = z;
}

---

animate

@keyframes ：
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。

animate：
规定动画的名称
规定动画的时长

div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}

@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}
或者
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

---

开始动手

<div class="ex2">
        <div class="change">
            <div class="square" id="square1">1</div>
            <div class="square" id="square2">2</div>
            <div class="square" id="square3">3</div>
            <div class="square" id="square4">4</div>
            <div class="square" id="square5">5</div>
            <div class="square" id="square6">6</div>
        </div>
    </div>

@keyframes squareAction {
  /*设置动画关键帧*/
  0% {
    transform: rotateX(0deg);
  }
  25% {
    transform: rotateX(180deg);
  }
  50% {
    transform: rotateX(360deg) rotateY(0deg);
  }
  75% {
    transform: rotateX(360deg) rotateY(180deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

// 设置视图
// perspective人看东西的距离
// perspective-origin观察视点。此处默认为视图的中心点
.ex2 {
  width: 400px;
  height: 400px;
  position: relative;
  perspective: 800px;
  perspective-origin: 50% 50%;
  margin: 50px auto;
}
//设置3D场景并将场景设置以上动画，以实现正方体翻滚的一系列动作
.change {
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  animation: squareAction 3s infinite;
}
//保证square 都重叠在一起再通过进行对应面的3D旋转或者景深实现不同的面
.square {
  width: 200px;
  height: 200px;
  border: 1px solid #333;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0.3;
  text-align: center;
  line-height: 200px;
  font-size: 42px;
  color: #777;
}
.square:first-child {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, -100px);
}
.square:nth-child(2) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 100px);
}
.square:nth-child(3) {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 100px);
}
.square:nth-child(4) {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 100px);
}
.square:nth-child(5) {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(0, 0, 100px);
}
.square:nth-child(6) {
  transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(0, 0, 100px);
}

---

实战代码Download

(github：KuanG97) 下载实战代码，此处css由Less编译，less文件有具体的步骤笔记，css兼容属性则由编辑器插件实现 ClickHere》

---

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~

---