<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>立方体漫游</title>
<style>
.box{
width: 200px;
height: 200px;
position: relative;
margin: 0px auto;
transform-style:preserve-3d ;/*给子级设置3d效果*/
transform: rotateX(30deg) rotateY(50deg) rotateZ(0deg) translate3d(0px,0px,0px);
/* 添加动画 */
animation: rotating 10s infinite linear;
}
@keyframes rotating{
0%{
transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,0px);
}
20%{
transform: rotateX(30deg) rotateY(72deg) rotateZ(0deg) translate3d(-500px,300px,400px);
}
40%{
transform: rotateX(30deg) rotateY(144deg) rotateZ(0deg) translate3d(100px,500px,600px);
}
60%{
transform: rotateX(30deg) rotateY(216deg) rotateZ(0deg) translate3d(500px,600px,800px);
}
80%{
transform: rotateX(30deg) rotateY(288deg) rotateZ(0deg) translate3d(800px,400px,600px);
}
100%{
transform: rotateX(30deg) rotateY(360deg) rotateZ(0deg) translate3d(100px,0px,0px);
}
}
div[class^="face_"]{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
opacity: 0.5;/*设置透明效果*/
}
.face_back{
background-color: rgb(129, 250, 9);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,100px);
}
.face_front{
background-color: #ff2d27;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,0px,0px);
}
.face_right{
background-color: #e492ff;
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,50px);
}
.face_left{
background-color: #8e7ceb;
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translate3d(-50px,0px,-50px);
}
.face_down{
background-color: #12fffd;
transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,-50px);
}
.face_up{
background-color: #61132b;
transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px,50px,50px);
}
</style>
</head>
<body>
<div class="box">
<div class="face_up">上</div>
<div class="face_down">下</div>
<div class="face_front">前</div>
<div class="face_back">后</div>
<div class="face_left">左</div>
<div class="face_right">右</div>
</div>
</body>
</html>
css写正方体并旋转
最新推荐文章于 2024-04-10 09:21:27 发布