CSS3动画2D3D转换

Posted 2021-04-09 前端实训

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3动画2D3D转换相关的知识，希望对你有一定的参考价值。

CSS3过渡效果

CSS3的过渡效果就是一个元素的样式改变时增加的一个动画过程。

transition属性

属性	描述
transition-property	设置过渡的CSS属性
transition-duration	设置过渡的时间
transition-timing-function	过渡效果的速度曲线
transition-delay	过渡的延迟时间

transition-timing-function属性值

属性	描述
linear	匀速运动
ease	逐渐变慢（默认）
ease-in	先慢后快
ease-out	先快后慢
ease-in-out	先慢后快再慢
cubic-Bezier (n,n,n,n)	贝塞尔曲线

例子

div{
	width: 100px;
	height: 100px;
	background: red;
	transition-property: width,height,background;
	transition-duration: 1s,1s,1s;
	transition-delay: 0s,1s,2s;
	transition-timing-function: cubic-bezier(.49,-0.21,.54,1.22);
	/*简写*/
	transition:width 1s cubic-bezier(.49,-0.21,.54,1.22),
	height 1s 1s,
	background 1s 2s;
}
div:hover{
	width: 400px;
	height: 400px;
	background: blue;
}

CSS3动画效果

创建动画

使用@keyframes创建动画,通过from..to或百分比设置动画关键帧。

@keyframes move
{
from {top:0px;}
to {top:100px;}
}
@keyframes move
{
0%   {top:0px;}
50%  {top:50px;}
100% {top:100px;}
}

animation属性

属性	描述
animation-name	动画属性名
animation-duration	设置动画的时间
animation-timing-function	动画的速度曲线
animation-delay	动画的延迟时间
animation-iteration-count	动画执行次数，infinite为无限
animation-direction	alternate逆向执行动画
animation-play-state	设置动画运行(running)或暂停(paused)
animation-fill-mode	动画时间之外的状态

animation-fill-mode属性值

属性	描述
none	默认行为。
forwards	当动画完成后，保持最后一个属性值。
backwards	在延迟时间时，应用动画第一个属性值。
both	forwards、backwards。

结构

<div class="wrap">
	<div></div>
</div>

样式

.wrap{
	width: 400px;
	height: 400px;
	border: 5px solid black;
	position: relative;
}
.wrap div{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	left: 0;
	/*transition: 1s;*/
	animation: move 2s linear 0s;
	animation-iteration-count: 2;
	animation-direction: alternate;
	
}
.wrap:hover div{
	animation-play-state: paused;
}
@keyframes move{
	0%{
		left: 0;top:0;
	}
	25%{
		left:300px;top: 0px;
	}
	50%{
		left:300px;top: 300px;
	}
	75%{
		left:0px;top: 300px;
	}
	100%{
		left: 0px;top: 0;
	}
}

CSS3-2D/3D转换

2D/3D 转换属性

属性	描述
transform	元素的 2D 或 3D 转换
transform-origin	改变被转换元素的位置
transform-style	可设置元素在 3D 空间中显示。
perspective	设置元素的3D效果。
perspective-origin	3D元素的位置。
backface-visibility	设置元素背面是否可见。

2D转换方法

方法	描述
translate(x,y)	元素位置移动
rotate(deg)	元素旋转
scale(x,y)	元素放大缩小
skew(x,y)	元素倾斜
matrix(n,n,n,n,n,n)	把所有转换方法组合在一起

3D转换方法

方法	描述
translate3d(x,y,z)	元素位置移动
rotate3d(x,y,z,deg)	元素旋转
scale3d(x,y,z)	元素放大缩小

例子

translate方法

结构

<div class="wrap">
	<div></div>
</div>

样式

.wrap{
	width: 100px;
	height: 100px;
	border:5px dashed black;
}
.wrap div{
	width: 100px;
	height: 100px;
	background: red;
	transform: translate(105px,50px);
}

效果

CSS3动画、2D、3D转换

scale方法

结构

<div class="wrap">
	<div></div>
</div>

样式

.wrap{
	width: 100px;
	height: 100px;
	border:5px dashed black;
	margin: 50px auto;
}
.wrap div{
	width: 100px;
	height: 100px;
	background: red;
	opacity: 0.5;
	transform: scale(1.5,1.5);
}

效果

CSS3动画、2D、3D转换

rotate方法

结构

<div class="wrap">
	<div class="d1">rotateX</div>
	<div class="d2">rotateY</div>
	<div class="d3">rotateZ</div>
</div>

样式

.wrap{
	/*设置3d视角距离*/
	perspective:1000px;
	/*设置为3d模式*/
	transform-style: preserve-3d;
	width: 500px;
	margin: 50px auto;
}
.wrap div{
	width: 100px;
	height: 100px;
	background: red;
	float: left;
	margin: 0 10px;
	transition: 1s;
}
.d1{transform: rotateX(45deg);}
.d2{transform: rotateY(45deg);}
.d3{transform: rotateZ(45deg);}
.d1:hover{transform: rotateX(90deg);}
.d2:hover{transform: rotateY(90deg);}
.d3:hover{transform: rotateZ(90deg);}

效果

CSS3动画、2D、3D转换

skew方法

结构

<div class="d1">skewX</div>
<div class="d2">skewY</div>

样式

div{
	width: 100px;
	height: 100px;
	background: red;
	float: left;
	margin: 50px 30px;
}
.d1{transform: skewX(30deg);}
.d2{transform: skewY(30deg);}

效果

CSS3动画、2D、3D转换

3D动画

结构

<div class="wrap">
	<div ></div>
</div>

样式

.wrap{
	/*设置3d视角距离*/
	perspective:1000px;
	/*设置为3d模式*/
	transform-style: preserve-3d;
	width: 200px;
	height: 300px;
	border: 5px solid black;
	margin: 50px auto;
}
.wrap div{
	width: 200px;
	height: 300px;
	background: red;
	transform: translate3d(0px,0px,200px);
	animation: move2 10s linear infinite;
}
@keyframes move{
	from{transform: rotateY(0deg) translate3d(0px,0px,200px)}
	to{transform: rotateY(360deg) translate3d(0px,0px,200px)}
}

效果

以上是关于CSS3动画2D3D转换的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 动画，转换为位置

CSS3 动画和变换属性的 Javascript 代码

[CSS3] 学习笔记-CSS动画特效

html CSS3动画转换

使用 javascript 为 CSS3 转换的值设置动画是不是会排除硬件加速？

css3 转换过渡动画 CSS 优化