CSS3过渡动画，CSS3-3D动画，CSS3-2D动画

最新推荐文章于 2024-02-05 12:30:13 发布

BUG飞檐走壁

最新推荐文章于 2024-02-05 12:30:13 发布

阅读量65

点赞数

文章标签： css3 3d css

本文链接：https://blog.csdn.net/weixin_47974251/article/details/130465492

版权

一、浏览器对C3动画的兼容

属性	浏览器版本	兼容前缀
3D	chrome V36.0+	-webkit-
	Edge V10.0+
	Firefox V16.0+	-moz-
	Safari V4.0+	-webkit-
	Opera V23.0+	-webkit-
2D	Safari V3.2+	-webkit-
2D	其他浏览器兼容版本同上

二、定义及区别

1、2D动画可以对元素进行拉伸，缩放，平面旋转，移动。

2、3D动画，直接对元素进行格式化，形成一个立体的空间，能自由的改变元素的形状，大小，坐标。

区别：通过上面的两点可以看出，其最大的区别就是一个是平面操作，一个可以立体操作，3D包含了2D的所有效果，也可以说3D是2D的一个升级版，3D改变坐标，使其具有空间感和距离感。

三、2D动画，过渡动画

过渡动画请添加此属性：transition，值班是时间，如：300ms，从一个状态过渡到另一个状态需要多久，添加过渡后会显得平滑和顺其自然。

话不多说，上代码，看例子，如果想体验更多的属性，请复制代码后自行替换去看效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
	.body{
	  width: 600px;
	  height: 600px;
	  border: 1px solid #000;
	  background: #333;
	}
	.moveDiv{
	  width: 200px;
	  height: 200px;
	  background-color: red;
	}
	.moveDiv{
	  width: 200px;
	  height: 200px;
	  display: flex;
	  justify-content: center;
	  background-color: #fff;
	  border-radius: 20px;
	  /*动画完成时间，给予动作变换以平滑过渡效果，让动作看起来不会那么生硬*/
	  /* transition: all 1s linear 0.5s; */
	  /* 上面的写法里添加了匀速直线运动linear，当然，还可以添加其他的属性，若想体验，请自行研究 */
	  transition: 1s;
	}
	.cneterDiv{
      width: 50px;
	  height: 50px;
	  align-self: center;
	  border-radius: 50%;
	  box-shadow: 0px 0px 20px #333;
	  background: red;
	}
	.body{
	  cursor: pointer;
	}
	.body:hover .moveDiv{
	  /*初始坐标为0，0 ，translate内坐标为将要移动到的目标坐标*/
	  transform: translate(400px,400px); /* 2D动画属性 */
      /* rotate()、scale()、skew()、matrix()，其他的2D动画属性，自己去试 */
	  }
	</style>
	<body>
	  <div class="body" >
	    <div class="moveDiv" >
			<div class="cneterDiv" ></div>
		</div>
	  </div>
	</body>
</html>

此代码运行后移动前效果图

移动后效果图

四、3D动画

3D动画最大的一个特点就是把二维转换成三维，使元素拥有一个3D“空间”，同时给元素添加了三轴：X、Y、Z轴，且元素还能在这此轴上移动，另外元素还可以做倾斜等操作。

如何定义3D

1、透视：perspective ，例：perspective：100，表示元素离镜头的距离，用来建立3D场景。配合设置perspective-origin：观察者的位置，观察原点，如果不设置，那默认是center。

2、3D呈现：transfrom-style (用于保存元素的3D 空间) flat:子元素将不保留其 3D 位置。(默认属性) preserve-3d子元素将保留其3D 位置。

3、3D旋转：retate3d（x，y，z），可以对单轴或多轴进行旋转，例：rotateX(angle)

4、3D位移：translate3d（x，y，z），可以同时单轴或轴进行位移，例：translateY(y)

5、3D缩放：scale3d(x, y, z)，可以同时操作单轴或多轴，例：scaleX(x)

6、3D倾斜：skewX（deg），可以定义元素倾斜角度，例：skewX(20deg)

什么多的展示都是白搭，直接写一段放在下面，自己复制代码去本地运行看看实际效果，必要的时候多动动手，比什么都强。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
	.body{
	  width: 100%;
	  height: auto;
	  font-size: 12px;
	}
	.example{
	  width: 300px;
	  height: 300px;
	  border: 1px solid #000;
	  margin-bottom: 20px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.dExample{
	  width: 100px;
	  height: 100px;
	  background: green;
	  perspective: 200;
	  perspective-origin: 10% 10%;
	  transition: all 1s initial 0.5s;
	}
	.dExample1{
	  background: red;
	  /* transform: translateX(-50px); */
	  animation: d1 2s infinite;
	}
	.dExample2{
	  background: green;
	  /* transform: translate3d(30px, 50px, 80px); */
	  animation: d2 3s infinite;
	}
	.dExample3{
	  background: blue;
	  /* transform: scale3d(1.2, 1.5, 1.6); */
	  /* transform: scaleX(1.9); */
	  animation: d3 4s infinite;
	}
	.dExample4{
	  background: darkmagenta;
	  /* transform: skewX(70deg); */
	  animation: d4 5s infinite;
	}
	@keyframes d1 {
		0%{
		  transform: translateX(0px);
		}
		100%{
		  transform: translateX(-50px);
		}
	}
	@keyframes d2 {
		0%{
		  transform: translate3d(0px, 0px, 0px);
		}
		25%{
		  transform: translate3d(50px, 50px, 90px);
		}
		50%{
		  transform: translateY(90px);
		}
		75%{
		  transform: translateZ(60px);
		}
		100%{
		  transform: translateX(-100px);
		}
	}
	@keyframes d3 {
		0%{
		  transform: scale3d(1.2, 1.5, 1.6);
		}
		25%{
		  transform: translate3d(50px, 50px, 90px);
		}
		50%{
		  transform: scaleX(1.9);
		}
		75%{
		  transform: skewX(-40deg);
		}
		100%{
		  transform: scaleX(1.3);
		}
	}
	@keyframes d4 {
		0%{
		  transform: skewX(0deg);
		}
		25%{
		  transform: translate3d(50px, 50px, 90px);
		}
		50%{
		  transform: skewX(-40deg);
		}
		75%{
		  transform: translateZ(60px);
		}
		100%{
		  transform: skewX(100deg);
		}
	}
	</style>
	<body>
	  <div class="body" >
		
	    <div class="example" >
			<div class="dExample dExample1" >3-3D旋转：retate3d</div>
		</div>
		
	    <div class="example" >
			<div class="dExample dExample2" >4-3D位移：translate3d</div>
		</div>
		
	    <div class="example" >
			<div class="dExample dExample3" >5-3D缩放：scale3d</div>
		</div>
		
	    <div class="example" >
			<div class="dExample dExample4" >6-3D倾斜：skewX（</div>
		</div>
		
	  </div>
	</body>
</html>

上面代码复制到本地效果如下，其他请自行探索

BUG飞檐走壁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3过渡动画，CSS3-3D动画，CSS3-2D动画

1、2D动画可以对元素进行拉伸，缩放，平面旋转，移动。2、3D动画，直接对元素进行格式化，形成一个立体的空间，能自由的改变元素的形状，大小，坐标。区别：通过上面的两点可以看出，其最大的区别就是一个是平面操作，一个可以立体操作，3D包含了2D的所有效果，也可以说3D是2D的一个升级版，3D改变坐标，使其具有空间感和距离感。
复制链接

扫一扫