3D动画坐标图如上
透视
perspective,透视可以将2D平面呈现出3D的效果。作为一个属性,设置给父元素,作用于所有3D转换的子元素。
3D呈现
transform-style:preserve-3d;使所有2D子元素呈现在3D的平面上。
旋转木马`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./base.css">
</head>
<style>
ul {
width: 248px;
height: 163px;
position: relative;
top: 170px;
left: 42%;
perspective: 5000px;
transform-style: preserve-3d;
animation: zhuan 5s infinite linear;
/* transform: rotateX(85deg); */
}
ul li{
position: absolute;
}
ul:hover{
animation-play-state: paused;
}
ul li:first-child{
transform: translateZ(240px);
}
ul li:nth-child(2){
transform: rotateY(60deg) translateZ(240px);
/* transform: ; */
}
ul li:nth-child(3){
transform: rotateY(300deg) translateZ(240px);
/* transform: ; */
}
ul li:nth-child(4){
transform: rotateY(180deg) translateZ(240px);
/* transform: ; */
}
ul li:nth-child(5){
transform: rotateY(240deg) translateZ(240px);
/* transform: ; */
}
ul li:nth-child(6){
transform: rotateY(120deg) translateZ(240px);
/* transform: ; */
}
@keyframes zhuan {
100%{
transform: rotateY(360deg);
}
}
</style>
<body>
<ul>
<li><img src="./images/recom_03.jpg"></li>
<li><img src="./images/recom_03.jpg"></li>
<li><img src="./images/recom_03.jpg"></li>
<li><img src="./images/recom_03.jpg"></li>
<li><img src="./images/recom_03.jpg"></li>
<li><img src="./images/recom_03.jpg"></li>
</ul>
</body>
</html>
css样式
.pd{
width: 100%;
height: 300px;
transform: all 3.2s ease;
}
.pd .pd1{
width:153px ;
height: 121px;
animation: move01 15s linear infinite;
}
.pd .pd1 .pad1{
width: 153px;
height: 121px;
background: url(./images/txgc_6d0e9e5.png);
background-repeat: no-repeat;
animation: play01 .4s steps(2) infinite;
}
@keyframes move01{
0%{
transform: translate(-200px,0);
}
100%{
transform: translate(1920px,0);
}
}
@keyframes play01{
0%{
background-position: 0 0;
}
100%{
background-position: -308px 0;
}
}
steps属性
animation: 动画名 执行时间 steps(number position) 次数;,
number 数值
把动画分为多少段
position
start
end