3D动画

来源：互联网发布：mysql唯一约束默认1 编辑：程序博客网时间：2024/04/28 20:59

<!doctype html>
<html lang="zh-cn">
<head>
<title>作业</title>
<meta charset="utf-8">
<style>
#stages{
perspective:1000px;
}
#content{
width:800px;
height:400px;
margin:100px auto;
position:relative;
transform:rotateX(-30deg);
transform-style:preserve-3d;
transition:transform 3s linear;
}
#content>div{
width:100px;
height:100px;
background:red;
position:absolute;
left:350px;
top:150px;
}
#content div:nth-child(1){
transform:translateZ(200px);
}
#content div:nth-child(2){
transform:rotatey(40deg) translateZ(200px);
}
#content div:nth-child(3){
transform:rotatey(80deg) translateZ(200px);
}
#content div:nth-child(4){
transform:rotatey(120deg) translateZ(200px);
}
#content div:nth-child(5){
transform:rotatey(160deg) translateZ(200px);
}
#content div:nth-child(6){
transform:rotatey(200deg) translateZ(200px);
}
#content div:nth-child(7){
transform:rotatey(240deg) translateZ(200px);
}
#content div:nth-child(8){
transform:rotatey(280deg) translateZ(200px);
}
#content div:nth-child(9){
transform:rotatey(320deg) translateZ(200px);
}
#content:hover{
transform:rotatey(290deg);
}
</style>
</head>
<body>
<div id="stages">
<div id="content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>

0 0