直播软件源码，CSS3实现图片立体旋转动画
<style>
body,html{
width: 100%;
height: 100%;
}
body{
perspective: 1000px;
}
.rq {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
/* border: 1px solid black; */
transform: translate(-50%, -50%);
transform-style: preserve-3d;
transition:3s;
animation:m1 3s infinite;
}
/* 动画关键帧 */
@keyframes m1{
0%{
transform: translate(-50%,-50%) rotate3d(10,10,10,0deg)
}
100%{
transform: translate(-50%,-50%) rotate3d(10,10,10,360deg)
}
}
img {
width: 200px;
/* height: 200px; */
position: absolute;
background-position: center;
}
.a1{
transform: translateZ(100px);
}
.a2{
transform: translateZ(-100px);
}
.a3{
transform: translateX(100px) rotateY(90deg);
}
.a4{
transform:translateX(-100px) rotateY(-90deg);
}
.a5{
transform: translateY(-100px) rotateX(90deg);
}
.a6{
transform: translateY(100px) rotateX(-90deg);
}
.rq:hover{
/* transform: translate(-50%,-50%) rotateX(110deg) */
}
</style>
</head>
<body>
<div class="rq">
<img class="a1" src="images/img_0.jpg" />
<img class="a2" src="images/img_1.jpg" />
<img class="a3" src="images/img_2.jpg" />
<img class="a4" src="images/img_3.jpg" />
<img class="a5" src="images/img_4.jpg" />
<img class="a6" src="images/img_5.jpg" />
</div>
<img />
</body>
以上就是 直播软件源码，CSS3实现图片立体旋转动画，更多内容欢迎关注之后的文章