CSS3_Node3_transform&transition&animation
-->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;
语法
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 ;
三、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与transition
Transition：对元素某个属性或多个属性的变化，进行控制，但只有两个关键贞 开始 和 结束
Animation：对元素某个属性或多个属性的变化，进行控制，可以设置多个关键贞
transition 需要触发一个‘事件’
-->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>