直播軟體原始碼，CSS3實現圖片立體旋轉動畫

zhibo系統開發發表於2022-05-25
原始碼CSSS3動畫

直播軟體原始碼，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實現圖片立體旋轉動畫，更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2896931/，如需轉載，請註明出處，否則將追究法律責任。

相關文章