直播软件源码，CSS3实现图片立体旋转动画

<style><br>body,html{<br>width: 100%;<br>height: 100%;<br>}<br>body{<br>perspective: 1000px;<br>}<br>.rq {<br>width: 200px;<br>height: 200px;<br>position: absolute;<br>left: 50%;<br>top: 50%;<br>/* border: 1px solid black; */<br>transform: translate(-50%, -50%);<br>transform-style: preserve-3d;<br>transition:3s;<br>animation:m1 3s infinite;<br>}<br>/* 动画关键帧 */<br>@keyframes m1{<br>0%{<br>transform:  translate(-50%,-50%) rotate3d(10,10,10,0deg)<br>}<br>100%{<br>transform:  translate(-50%,-50%) rotate3d(10,10,10,360deg)<br>}<br>}<br>img {<br>width: 200px;<br>/* height: 200px; */<br>position: absolute;<br>background-position: center;<br>}<br>.a1{<br>transform: translateZ(100px);<br>}<br>.a2{<br>transform: translateZ(-100px);<br>}<br> .a3{<br>transform: translateX(100px) rotateY(90deg);<br>}<br> .a4{<br>transform:translateX(-100px) rotateY(-90deg);<br>}<br>.a5{<br>transform: translateY(-100px) rotateX(90deg);<br>}<br>.a6{<br>transform: translateY(100px) rotateX(-90deg);<br>}<br>.rq:hover{<br>/* transform:  translate(-50%,-50%) rotateX(110deg) */<br>} <br> <br></style><br> <br></head><br><body><br><div class="rq"><br><img class="a1" src="images/img_0.jpg" /><br><img class="a2" src="images/img_1.jpg" /><br><img class="a3" src="images/img_2.jpg" /><br><img class="a4" src="images/img_3.jpg" /><br><img class="a5" src="images/img_4.jpg" /><br><img class="a6" src="images/img_5.jpg" /><br></div><br><img /><br></body>