<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 500px;
height: 300px;
margin: 100px auto 0;
overflow: hidden;
}
.box img{
float: left;
}
#and{
perspective:600;
transform-style: preserve-3d;
/*动画名称 动画时间 速度曲线(liner,ease,ease-in.ease-out,ease-in-out) 动画前延迟 动画播放次数(n|infinite) */
animation: animation-x 7s linear 0s infinite;
}
.i3d,.l3d{
transform-style: preserve-3d;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes animation-x{
0%{transform: rotateX(0deg);}
50%{transform: rotateX(180deg);}
100%{transform: rotateX(360deg);}
}
#animate1{
animation: animation-y 5s linear 0s infinite;
}
#animate3{
animation: animation-y 3s linear 0s infinite;
}
@keyframes animation-y{
0%{transform: rotateY(0deg);}
50%{transform: rotateY(180deg);}
100%{transform: rotateY(360deg);}
}
#animate2{
animation: animation-second 4s linear 0s infinite;
}
@keyframes animation-second{
0%{transform: rotateY(360deg);}
50%{transform: rrotateY(180deg);}
100%{transform: rotateY(0deg);}
}
</style>
</head>
<body>
<div id="and" class="box">
<div id="animate1" class="l3d">
<img class="i3d" src="image/ps1.jpg" />
<img class="i3d" src="image/ps2.jpg" />
<img class="i3d" src="image/ps3.jpg" />
<img class="i3d" src="image/ps4.jpg" />
<img class="i3d" src="image/ps5.jpg" />
</div>
<div id="animate2" class="l3d">
<img class="i3d" src="image/ps6.jpg" />
<img class="i3d" src="image/ps7.jpg" />
<img class="i3d" src="image/ps8.jpg" />
<img class="i3d" src="image/ps9.jpg" />
<img class="i3d" src="image/ps10.jpg" />
</div>
<div id="animate3" class="l3d">
<img class="i3d" src="image/ps11.jpg" />
<img class="i3d" src="image/ps12.jpg" />
<img class="i3d" src="image/ps13.jpg" />
<img class="i3d" src="image/ps14.jpg" />
<img class="i3d" src="image/ps15.jpg" />
</div>
</div>
</body>
</html>
简单的3d变换
Posted 空山竹语
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的3d变换相关的知识，希望对你有一定的参考价值。
以上是关于简单的3d变换的主要内容，如果未能解决你的问题，请参考以下文章