有人能给我一段3d效果的代码吗？
我想模仿学习
1 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3六方块绕Y轴旋转</title>
<style>
html,body{
perspective: 1000px;
}
.container{
width: 500px;
height: 500px;
transform-style: preserve-3d;
margin:100px auto;
position: relative;
animation: move 10s linear infinite;
}
@keyframes move {
from{ transform: rotateY(0deg) }
to{transform: rotateY(360deg)}
}
.container:hover{
animation-play-state: paused;
}
.square{
position: absolute;
width: 200px;
height: 200px;
left: 150px;
top:150px;
background-color: #f05e6f;
opacity: 0.3;
font-size: 40px;
color: #FFFFFF;
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
line-height: 200px;
text-align: center;
}
#squ-1{ transform: rotateY(0deg) translateZ(250px); }
#squ-2{ transform: rotateY(60deg) translateZ(250px); }
#squ-3{ transform: rotateY(120deg) translateZ(250px); }
#squ-4{ transform: rotateY(180deg) translateZ(250px); }
#squ-5{ transform: rotateY(240deg) translateZ(250px); }
#squ-6{ transform: rotateY(300deg) translateZ(250px); }
</style>
</head>
<body>
<div>
<div id="squ-1">one</div>
<div id="squ-2">two</div>
<div id="squ-3">three</div>
<div id="squ-4">four</div>
<div id="squ-5">five</div>
<div id="squ-6">six</div>
</div>
</body>
</html>欢迎采纳
举报
0/150
提交
取消
