其實這個就是對CSS3 transform 屬性animation屬性的一個簡單的應用，在網頁平面中創建6個面（div），讓這6個面勻速的不停的旋轉，要創造出來一個3d的感覺，在一個2維的網頁平面上，你覺得應該怎么做呢？最直接的就是讓它們在Z軸上有東西，下面這6張圖片，是我隨便找的狐妖小紅娘中的圖片，大小不是200px 200px的，我在圖片屬性上加了點東西，效果還不錯，
代碼：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>旋轉魔方test</title>
<link rel="icon" href="img/qisui.ico">
<style type="text/css">
html {
perspective: 888px; /*設定元素被查看位置的視圖： 設定了這個才有后面的3d效果*/
}
.club-wrapper {
width: 200px;
height: 200px;
/*background-color: #f10215;*/
/*開啟它的相對定位 讓它的子元素參照它 絕對定位*/
position: relative;
margin: 333px auto;
/*設定3d變形效果*/
transform-style: preserve-3d;
animation: run 15s infinite linear;
}
/*設定club-wrapper下的所有的div的樣式 給他們寬度和透明效果*/
.club-wrapper > div {
width: 200px;
height: 200px;
opacity: 0.7;
position: absolute;
}
img {
vertical-align: top;
width: 200px;
height: 200px;
background-size: contain;
}
/*創建關鍵幀 */
@keyframes run {
from {
transform: rotateX(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateZ(1turn);
}
}
/*設定6個面的旋轉 自己想象一下 空間中有6個面 這六個面最初都是貼在網頁平面的 然后經過變幻 到6個位置*/
.box1 {
transform: rotateY(90deg) translateZ(100px);
}
.box2 {
transform: rotateY(-90deg) translateZ(100px);
}
.box3 {
transform: rotateX(90deg) translateZ(100px);
}
.box4 {
transform: rotateX(-90deg) translateZ(100px);
}
.box5 {
transform: rotateY(180deg) translateZ(100px);
}
.box6 {
transform: rotateY(0deg) translateZ(100px);
}
</style>
</head>
<body>
<!--創建一個外層的容器-->
<div class="club-wrapper">
<div class="box1">
<img src="img/111.jpg">
</div>
<div class="box2">
<img src="img/222.jpg">
</div>
<div class="box3">
<img src="img/333.jpg">
</div>
<div class="box4">
<img src="img/444.jpg">
</div>
<div class="box5">
<img src="img/555.jpg">
</div>
<div class="box6">
<img src="img/666.jpg">
</div>
</div>
</body>
</html>
效果：點我（服務器沒過期之前可以看）
gif圖片展示：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/132186.html
標籤：其他