當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

旋转的立方体

發布時間：2023/11/27 生活经验 35 豆豆

生活随笔收集整理的這篇文章主要介紹了旋转的立方体小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近總是糾結去哪里吃飯，所以就想著做了一個色子，也算是朝花夕拾了，最后做出來的是一個旋轉的立方體，整體美感還好：實現了永久旋轉，懸浮停止和突出及一個分散的效果：以下是代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方體旋轉</title>
<style type="text/css">
*{margin:0 auto;padding:0;
}
@keyframes rotate{0%{transform:rotateX(0deg) rotateY(0deg);}100%{transform:rotateX(360deg) rotateY(360deg);}
}html{height:100%;
}
.wrap{width: 200px;height: 200px;margin-top:200px;perspective: 1000px;
}
.cube{width:200px;height:200px;position:relative;color:#fff;font-size:36px;text-align:center;line-height:200px;transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-70deg); animation:rotate 20s infinite linear; 
}
.cube > div{width:100%;height:100%;border:1px solid #fff;position:absolute;background:rgba(0,0,0,.5);opacity:.5;transition:transform 0.5s ease-out;
}
.cube > div >img{width: 200px;height: 200px;
}
.cube .out-front{transform: translateZ(100px);
}
.cube .out-back{transform: translateZ(-100px) rotateY(180deg);
}
.cube .out-left{transform: translateX(-100px) rotateY(-90deg);
}
.cube .out-right{ transform: translateX(100px) rotateY(90deg);
}
.cube .out-top{transform: translateY(-100px) rotateX(90deg);
}
.cube .out-bottom{transform: translateY(100px) rotateX(-90deg);
}
.cube .in-front{transform: translateZ(50px);
}
.cube .in-back{transform: translateZ(-50px) rotateY(180deg);
}
.cube .in-left{transform: translateX(-50px) rotateY(-90deg);
}
.cube .in-right{transform: translateX(50px) rotateY(90deg);
}
.cube .in-top{transform: translateY(-50px) rotateX(90deg);
}
.cube .in-bottom{transform: translateY(50px) rotateX(-90deg);
}
.wrap:hover .out-front{transform: translateZ(200px);
}
.wrap:hover .out-back{transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .out-left{transform: translateX(-200px) rotateY(-90deg);
}
.wrap:hover .out-right{transform: translateX(200px) rotateY(90deg);
}
.wrap:hover .out-top{transform: translateY(-200px) rotateX(90deg);
}
.wrap:hover .out-bottom{transform: translateY(200px) rotateX(-90deg);
}</style>
</head>
<body>
<div class="wrap"><div class="cube cubeX"><div class="out-front"><img src="./img/1.jpg" alt=""></div><div class="out-back">kim</div><div class="out-left"><img src="./img/3.jpg" alt=""></div><div class="out-right"><img src="./img/4.jpg" alt=""></div> <div class="out-top"><img src="./img/5.jpg" alt=""></div><div class="out-bottom"><img src="./img/6.jpg" alt=""></div></div>
</div>
</body>
<script type="text/javascript" src="jquery-1.8.1.js"></script><script>$(".cube > div").mouseover(function(){$(".cube").css({"animation-play-state":"","animation-duration":"7s"});$(this).css("opacity",1);}).mouseout(function(){$(".cube").css({"animation-play-state":"","animation-duration":"20s"});$(this).css("opacity",.5);})</script>
</html>

以上利用了transform屬性和旋轉的屬性，實現了立方體的拼接，旋轉。整體代碼巨簡單，jq因為是本地引入，具體路徑與版本需看自己的情況。

轉載于:https://www.cnblogs.com/wyliunan/p/8295797.html

總結

以上是生活随笔為你收集整理的旋转的立方体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

立方体