CSS动画+3d实现立方体旋转
CSS动画+3d实现立方体旋转
·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{
/*搭建3D环境*/
transform-style:preserve-3d;
/*景深 近大远小*/
perspective: 900px;
}
.box{
width: 200px;
height: 200px;
margin:300px auto;
position:relative;
/*搭建3D环境*/
transform-style:preserve-3d;
transition:2s;
}
/*利用动画来触发自动旋转*/
.box{
animation:xz 1s infinite;
}
/* 鼠标悬停在box上，运动停止 */
.box:hover{
animation-play-state:paused;
}
@keyframes xz{
from{
transform:rotate(0deg);
}
to{
transform:rotateY(360deg);
}
}
.box div{
width:200px;
height: 200px;
font-size:40px;
font-weight:bold;
line-height:200px;
text-align:center;
color:red;
position:absolute;
}
.box1{
background: rgba(255,100,100,0.5);
/*上面*/
transform:translateY(-100px) rotateX(90deg);
}
.box2{
background: rgba(255,200,100,0.5);
/*右面*/
transform:translateX(100px) rotateY(90deg);
}
.box3{
background: rgba(25,100,200,0.5);
/*下面*/
transform:translateY(100px) rotateX(-90deg);
}
.box4{
background: rgba(200,200,200,0.5);
/*后面 */
transform:translateZ(-100px) rotateY(180deg);
}
.box5{
background: rgba(25,10,10,0.5);
/*前面*/
transform:translateZ(100px);
}
.box6{
background: rgba(25,200,10,0.5);
/*左边*/
transform:translateX(-100px) rotateY(-90deg);
}
.box img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"><img src="2.png" ></div>
<div class="box2"><img src="1.jpg" ></div>
<div class="box3"><img src="2.png" ></div>
<div class="box4"><img src="2.png" ></div>
<div class="box5"><img src="1.jpg" ></div>
<div class="box6"><img src="2.png" ></div>
</div>
</body>
</html>
效果图如下所示：
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)