CSS3畫旋轉的正方體
阿新 • • 發佈：2019-02-11
<body> <div class="container"><!--用於設定景深的位置，一定要有個在所有旋轉元素之上的元素，放置景深--> <div class="cube"><!--用於為子元素設定3D效果，同時圍繞的座標軸也是以此元素為基礎。若在這裡放景深，跳不出來效果--> <div class="cubeA rect">1</div><!--具體效果看css就明白了。旋轉下就好--> <div class="cubeB rect">2</div> <div class="cubeC rect">3</div> <div class="cubeD rect">4</div> <div class="cubeE rect">5</div> <div class="cubeF rect">6</div> </div> </div> </body>
body { background-color: #000; } .container { width: 100%; height: 800px; -webkit-perspective: 800; padding-top: 300px; //預設景深的中心點，為50% 50%; -webkit-perspective-origin: 50% 40%; } @-webkit-keyframes spin { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-360deg); } } .cube { margin: 0 auto; width: 200px; height: 200px; position: relative; -webkit-animation: spin 8s infinite linear; -webkit-transform-style: preserve-3d; } .cube .rect { position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; border-radius: 5px; border: 1px solid #ccc; font-size: 125pt; text-align: center; line-height: 200px; background-color: #bbb; opacity: 0.5; } .cube .cubeA { //這裡要放大1.2倍。比較好看。 -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px); } .cube .cubeB { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px); } .cube .cubeC { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px); } .cube .cubeD { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px); } .cube .cubeE { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px); } .cube .cubeF { -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px); }
PS...想看完整效果，TOUCHME