CSS3_Node3_transform&transition&animation_animation autoscroll-优快云博客

本文详细介绍了CSS3中的变形(transform)、过渡(transition)及动画(animation)技术，包括各种属性如rotate、scale、skew的使用方法，关键帧动画的创建过程，以及3D效果的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-->CSS3 变形
-->CSS3 过渡
-->CSS3 动画

一、CSS3 变形
1、transform--变形
transform 属性向元素应用 2D 或 3D 转换
该属性允许我们对元素进行旋转、扭曲、缩放、移动：
rotate(angle) | skew(x-angle,y-angle) | scale(x,y) | translate(x,y)
旋转 | 扭曲（倾斜） | 缩放 | 移动

支持情况：
IE6789及其他较低版本浏览器不支持transform属性3D转换
目前 IE9及以上、Firefox、Opera、Safari 和 Chrome 等主流浏览器都支持transform属性2D转换

2、变形3D设置
transform-style:规定如何在3D空间中呈现被嵌套的元素
preserve-3d 子元素将具有 3D 属性
父级设置，对相应变化的子标签使用3D效果
示例：
-webkit-transform-style: preserve-3d;

3、perspective 属性定义 3D 元素距视角点的距离，以像素计
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
perspective: number | none（默认）;
perspective-origin 属性设置 3D 元素的视角点位置
语法: perspective-origin: x y（默认：center||50%）;
top | bottom | left | right | center | length | %

4、transform:rotate();-->变形-旋转
rotate(angle) 定义 2D 旋转，在参数中规定角度。rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
backface-visibility: visible | hidden; 背面是否可见

5、transform:translate(); -->变形-移动
translate(x,y) 定义 2D 移动。
translate3d(x,y,z) 定义 3D 移动。
translateX(length) 定义对象X轴的平移
translateY(length) 定义对象Y轴的平移
translateZ(length) 定义对象3D 移动Z轴的平移
-webkit-transform:translate(50px,50px);
-webkit-transform: translate3d(50px,50px,50px);

6、transform:scale();-->变形-缩放
scale(x,y) 定义 2D 缩放转换
scale3d(x,y,z) 定义 3D 缩放转换
scaleX(number) 通过设置 X 轴的值来定义缩放转换
scaleY(number) 通过设置 Y 轴的值来定义缩放转换
scaleZ(number) 通过设置 Z 轴的值来定义 3D 缩放转换
-webkit-transform:scale(3,2);
-webkit-transform:scaleX(2) scaleY(1.5);
-webkit-transform:scale3d(2,1,3);

7、transform:skew(); -->变形-扭曲(倾斜)
skew(x , y) 定义沿着 X 和 Y 轴的 2D 扭曲转换
skewX(angle) 定义沿着 X 轴的 2D 扭曲转换
skewY(angle) 定义沿着 Y 轴的 2D 扭曲转换
-webkit-transform:skew(30deg,10deg);
-webkit-transform:skewX(30deg) skewY(10deg);

8、transform:matrix(); -->变形-矩阵
matrix(number,number,number,number,number,number)：
以一个含六个值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，
相当于直接应用一个[a,b,c,d,e,f]变换矩阵

[a,b,c,d,e,f]变换矩阵总结
CSS3的全部变形效果均能够使用矩阵来实现
浏览器在处理时是将所有的效果全部转换为matrix执行
1,4两个位置（a，d）用来控制缩放
2,3两个位置（b，c）用来控制扭曲（倾斜）
5,6两个位置（e，f）用来控制移动
1,2,3,4两个位置（a，b，c，d）用来控制"形状"
5,6这个位置（e , f）用来控制移动
-webkit-transform:matrix( 1 , 0 , -1 , 1 , 10 , 20 ) ;

9、变形-参考位置-->transform-origin 属性允许改变被转换元素的参考位置
transform-origin: x y z ; 参考位置：默认为中心点
X：定义视图被置于 X 轴的何处, 值：length | left | center | right | %
Y：定义视图被置于 Y 轴的何处, 值：length | top | center | bottom | %
Z：定义视图被置于 Z 轴的何处, 值：length
2D 转换元素能够改变元素 x 和 y 轴
3D 转换元素还能改变其 Z 轴
transform-origin:50px 50px; transform-origin:left top;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
*{margin:0;padding:0;list-style: none;}
html,body{
	background: #000;
}
.list{
	overflow: hidden;
	padding: 40px;
}
.list li{
	width:200px;
	height:140px;
	line-height: 140px;
	font-size: 40px;
	font-weight: 800;
	text-align: center;
	color: #fff;
	background: orange;
	float: left;
	margin:10px;
}

/*rotate(angle) 定义  2D 旋转，在参数中规定角度。*/
.list .rotate:hover{
	transform:rotate(20deg);
}
/* rotateX(angle)  定义沿着 X 轴的 3D 旋转。 */
.list .rotateX:hover{
	transform:rotateX(20deg);
}
.list .rotateY{
	background: url(1.jpg) 0 0 no-repeat;
	background-size:cover;
}
/* rotateY(angle)  定义沿着 Y 轴的 3D 旋转。 */
.list .rotateY:hover{
	transform:rotateY(40deg);
}
/* rotateZ(angle)  定义沿着 Z 轴的 3D 旋转。 */
.list .rotateZ:hover{
	transform:rotateZ(20deg);
}

/*translate(x,y)	定义 2D 移动。*/
.list .translate:hover{
	transform:translate(20px,30px);
}
/*translateX(length)	定义对象X轴的平移*/
.list .translateX:hover{
	transform:translateX(20px);
}
/*translateY(length)	定义对象Y轴的平移*/
.list .translateY:hover{
	transform:translateY(20px);
}
/*translateZ(length)	定义对象3D 移动Z轴的平移*/
.list .translateZ:hover{
	transform:rotateY(45deg) translateZ(45px);
}
.list .translateZ{
	transform:rotateY(45deg);
}
/*translate3d(x,y,z)	定义 3D 移动。*/
.translate3d:hover{
	transform:rotateY(45deg) translate3d(20px,30px,50px);
}

.scale:hover{
	transform:scale(1.2,1.5);
}
.scaleX:hover{
	transform:scaleX(0.8);
}
.scaleY:hover{
	transform:scaleY(1.5);
}
.scaleZ:hover{
	transform:scaleZ(1.5);/* 平面图形没效果 */
}
.scale3d:hover{
	transform:scale3d(0.8,1.2,0.2);
}

/*skew(x , y)	   定义沿着 X 和 Y 轴的 2D 扭曲转换*/
.skew:hover{
	transform: skew(30deg,30deg);
}
/*skewX(angle)	定义沿着 X 轴的 2D 扭曲转换*/
.skewX:hover{
	transform: skewX(30deg);
}
/*skewY(angle)	定义沿着 Y 轴的 2D 扭曲转换*/
.skewY:hover{
	transform: skewY(30deg);
}
</style>
</head>
<body>
<ul class="list">
	<li class="rotate">rotate</li>
	<li class="rotateX">rotateX</li>
	<li class="rotateY">rotateY</li>
	<li class="rotateZ">rotateZ</li>

	<li class="translate">translate</li>
	<li class="translateX">translateX</li>
	<li class="translateY">translateY</li>
	<li class="translateZ">translateZ</li>
	<li class="translate3d">translate3d</li>

	<li class="scale">scale</li>
	<li class="scaleX">scaleX</li>
	<li class="scaleY">scaleY</li>
	<li class="scaleZ">scaleZ</li>
	<li class="scale3d">scale3d</li>

	<li class="skew">skew</li>
	<li class="skewX">skewX</li>
	<li class="skewY">skewY</li>
</ul>
</body>
</html>

二、CSS3 过渡

1、过渡效果语法
语法
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
默认值：看每个独立属性
取值
[transition-property]：检索或设置对象中的参与过渡的属性
[transition-duration]：检索或设置对象过渡的持续时间
[transition-timing-function]：检索或设置对象中过渡的动画类型
[transition-delay]：检索或设置对象延迟过渡的时间

2、transition-property
语法
transition-property：all（默认） | none | property,property...
all：所有可以进行过渡的css属性
none：不指定过渡的css属性
property：指定要进行过渡的css属性

3、transition-duration
transition-duration：time[ ,time ]...默认值：0
time：指定对象过渡的持续时间

4、transition-timing-function
语法
transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) 默认值：ease
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(number, number, number, number)：贝塞尔曲线类型

5、transition-delay
transition-delay：time[ ,time ]... 默认值：0
time：指定对象过渡的延迟时间

6、书写方式：
分写：
transition:border-color 0.5s ease-in 0.1s, background-color 0.5s ease-in 0.1s, color 0.5s ease-in 0.1s;
如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以如此拆分：
transition-property:border-color, background-color, color; transition-duration:0.5s;
transition-timing-function:ease-in;
transition-delay:0.1s;
简写：transition: all 0.5s ease-in 0.1s ;

用transform&transition写立方体3d动画：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform&transition</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{/* 舞台元素 */
	perspective:1000px;/* 视距 */
}
ul{
	position: relative;
	width:200px;
	height:200px;
	margin:50px auto 0;
	background-color: transparent;
	transform-style:preserve-3d;/* 设置子元素有3d属性 */
	transform:rotateX(-20deg) rotateY(30deg);
	transition: all 2s ease-in 0.5s;
}
ul:hover{
	transform:rotateX(-120deg) rotateY(140deg);
	/*transition: all 2s ease-in 0.5s;*/
}
ul li{
	width:200px;
	height:200px;
	background-color: #ccc;
	opacity: 0.5;
	line-height: 200px;
	text-align: center;
	font-size: 40px;
	font-weight: 800;
	color: #fff;
	position: absolute;
	top:0;
	left: 0;
}
ul li:nth-child(1){/*前*/
	background-color: #F11805;
	transform:translateZ(100px);
}
ul li:nth-child(3){/*后*/
	background-color: #F8F608;
	transform:rotateY(180deg) translateZ(100px);
}
ul li:nth-child(2){
	background-color: #45F808;
	transform:rotateY(90deg) translateZ(100px);
}
ul li:nth-child(4){
	background-color: #08F1F8;
	transform:rotateY(-90deg) translateZ(100px);
}
ul li:nth-child(5){
	background-color: #DA08F8;
	transform:rotateX(90deg) translateZ(100px);
}
ul li:nth-child(6){
	background-color: #8B08F8;
	transform:rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</body>
</html>

三、CSS3 动画

1、animation属性
-webkit-animation-name:move; /*动画属性名，前面keyframes样例定义的动画名*/
-webkit-animation-duration: 10s; /*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画效果*/ease | linear | ease-in | ease-out | cubic-Bezier (n1 , n2, n3, n4)
-webkit-animation-delay: 2s; /*动画延迟时间*/
-webkit-animation-iteration-count: number||infinite为无限次; /*动画循环次数*/

-webkit-animation-direction: normal(默认); /*动画播放方式*/
normal，动画正常播放；
reverse反向播放；
alternate，动画轮流反向播放

animation-fill-mode 动画播放之前或之后显示效果
语法：animation-fill-mode : forwards | backwards | both;
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束和开始的状态

animation-play-state 属性规定动画运行还是暂停
语法：animation-play-state: paused | running ;
running：播放动画（默认值）
paused：暂停动画
例：
sto.onclick=function (){
box.style.animationPlayState='paused';
}

2、书写方式：
缩写：
animation:[<animation-name> || <animation-duration> ||<animation-timing-function>
|| <animation-delay> ||<animation-iteration-count> || <animation-direction>
|| <animation-fill-mode>] || animation-play-state
实例：
.all { -webkit-animation:autoscroll 5s linear infinite reverse forwards; }

3、关键帧语法
@keyframes name{
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }
}
样例
@-webkit-keyframes move{
0% { margin-left: 100px; background: green; }
40% { margin-left: 150px; background: orange; }
60% { margin-left: 75px; background: blue; }
100% { margin-left: 100px; background: red; }

}

animation&动画&关键帧：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{
	width:100px;
	height:100px;
	border-radius: 50%;
	background: red;
	position: absolute;
	top:50px;
	left:50px;
	/* animation-name:run1;
	animation-duration: 2s;
	animation-timing-function:ease-in;
	animation-delay:1s;
	animation-iteration-count:5; */
	/*animation-direction:reverse;*//*反向*/
	/* animation-direction:alternate; *//*轮流反向*/
	/*animation-fill-mode:forwards;*/
	/*animation-fill-mode:backwards;*/
	/*animation-fill-mode:both;*/
	/*animation-play-state:paused;*/
	animation:run2 2s ease-in 0.5s infinite reverse forwards;
}
/* 关键帧 */
@keyframes run1{
	from{top:50px;left:50px;background: red}
	to{top:50px;left:650px;background: green}
}
@keyframes run2{
	0% {top:50px;left:50px;background:red;}/* 
	25% {top:50px;left:650px;background:orange;}
	50% {top:450px;left:650px;background:yellow;}
	75% {top:450px;left:50px;background:blue;} */
	100% {top:450px;left:450px;background: green;}
}
</style>
</head>
<body>
	<button id="run">running</button>
	<button id="stop">paused</button>
	<div id="box"></div>
</body>
<script>
var box=document.getElementById('box');
var run=document.getElementById('run');
var stop=document.getElementById('stop');
run.onclick=function(){
	box.style.animationPlayState='running';//播放动画
}
stop.onclick=function(){
	box.style.animationPlayState='paused';//暂停动画
}
</script>
</html>

四、animation与transition
Transition：对元素某个属性或多个属性的变化，进行控制，但只有两个关键贞开始和结束
Animation：对元素某个属性或多个属性的变化，进行控制，可以设置多个关键贞

transition 需要触发一个‘事件’

animation 不需要触发任何事件

transform&animation_动心：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform&animation</title>
<style>
*{margin:0;padding:0;list-style: none;}
html,body{
	background: pink;
}
.heart{
	overflow: hidden;
	width:200px;
	height:150px;
	padding: 70px;
	background-color: #000;
	margin:50px auto 0;
}
.heart li{
	width:100px;
	height:150px;
	float: left;
	background-color: red;
	border-radius: 50% 50% 0 0;

}
.heart li:nth-child(1){
	transform-origin:right bottom;
	transform:rotate(46deg) scale(1);
	animation:tiao1 0.5s linear infinite;
}
.heart li:nth-child(2){
	transform-origin:left bottom;
	transform:rotate(-46deg) scale(1);
	animation:tiao2 0.5s linear infinite;
}
@keyframes tiao1{
	0%{transform:rotate(46deg) scale(1);}
	50%{transform:rotate(46deg) scale(1.3);}
	100%{transform:rotate(46deg) scale(1);}
}
@keyframes tiao2{
	0%{transform:rotate(-46deg) scale(1);}
	50%{transform:rotate(-46deg) scale(1.3);}
	100%{transform:rotate(-46deg) scale(1);}
}
</style>
</head>
<body>
	<ul class="heart">
		<li></li>
		<li></li>
	</ul>
</body>
</html>

transform&animation_旋转圆柱：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转圆柱</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{background: #000;
	perspective:1000px;/*视距*/
}
ul{
	width:206px;
	height:306px;
	position: relative;
	margin:150px auto;
	transform-style:preserve-3d;
	/* 设置子元素有3d属性 */
	/*transform:rotateX(-72deg) rotateY(0deg) rotateZ(43deg);*/
	animation: run1 2s linear infinite forwards;

}
@keyframes run1{
	0%{transform:rotateY(0deg) rotateZ(30deg);}
	100%{transform:rotateY(360deg) rotateZ(30deg);}
}
ul li{
	width:200px;
	height:300px;
	opacity: 0.8;
	position: absolute;
	top:0;
	left:0;
	border:3px solid #ccc;
}
ul li img{
	float: left;
	width:200px;
	height:300px;
}
ul li:nth-child(1){
	transform:translateZ(200px);
}
ul li:nth-child(4){
	transform:rotateY(-180deg) translateZ(200px);
}

ul li:nth-child(2){
	transform:rotateY(60deg) translateZ(200px);
}
ul li:nth-child(5){
	transform:rotateY(-120deg) translateZ(200px);
}

ul li:nth-child(3){
	transform:rotateY(120deg) translateZ(200px);
}
ul li:nth-child(6){
	transform:rotateY(-60deg) translateZ(200px);
}
</style>
</head>
<body>
	<ul>
		<li><img src="images/yz1.jpeg" alt=""><p>1</p></li>
		<li><img src="images/yz2.jpeg" alt=""><p>2</p></li>
		<li><img src="images/yz3.jpg" alt=""><p>3</p></li>
		<li><img src="images/yz4.jpeg" alt=""><p>4</p></li>
		<li><img src="images/yz5.jpeg" alt=""><p>5</p></li>
		<li><img src="images/yz6.jpg" alt=""><p>6</p></li>
	</ul>
</body>
</html>