纯CSS实现立方体旋转
生活随笔
收集整理的這篇文章主要介紹了
纯CSS实现立方体旋转
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下面為通過CSS動畫實現的立方體旋轉，可以改變CSS代碼中關鍵幀定義（@keyframes）來改變立方體的旋轉方式
HTML部分：
<body class="body"><div class="rect-wrap"> <!-- //舞臺元素，設置perspective，讓其子元素獲得透視效果。 --><div class="container"> <!-- //容器，設置transform-style: preserve-3d，讓其子元素在3D空間呈現 --><div class="top slide">1</div> <!-- //立方體的六個面 --><div class="bottom slide">2</div><div class="left slide">3</div><div class="right slide">4</div><div class="front slide">5</div><div class="back slide">6</div></div></div> </body>CSS部分：
<style>.rect-wrap {position: relative;perspective: 2000px;}.container {width: 400px;height: 400px;transform-style: preserve-3d;transform-origin: 50% 50% 100px; /* //設置3d空間的原點在平面中心再向Z軸移動200px的位置 *//* left: 50%;margin-left: -200px; */top: 100px;}.slide {width: 200px;height: 200px;position: absolute;background: #000;line-height: 200px;text-align: center;color: #fff;font-size: 30px;font-weight: bold;}.top {left: 100px;top: -100px;transform: rotateX(-90deg);transform-origin: bottom;background: red;}.bottom {left: 100px;bottom: -100px;transform: rotateX(90deg);transform-origin: top;background: grey;}.left {left: -100px;bottom: 100px;transform: rotateY(90deg);transform-origin: right;background: green;}.right {left: 300px;bottom: 100px;transform: rotateY(-90deg);transform-origin: left;background: yellow;}.front {left: 100px;top: 100px;transform: translateZ(200px);background: black;}.back {left: 100px;top: 100px;transform: translateZ(0);;background: blue;}@keyframes rotate-frame {0% {transform: rotateX(0deg) rotateY(0deg);}10% {transform: rotateX(0deg) rotateY(180deg);}20% {transform: rotateX(-180deg) rotateY(180deg);}30% {transform: rotateX(-360deg) rotateY(180deg);}40% {transform: rotateX(-360deg) rotateY(360deg);}50% {transform: rotateX(-180deg) rotateY(360deg);}60% {transform: rotateX(90deg) rotateY(180deg);}70% {transform: rotateX(0) rotateY(180deg);}80% {transform: rotateX(90deg) rotateY(90deg);}90% {transform: rotateX(90deg) rotateY(0);}100% {transform: rotateX(0) rotateY(0);}}.container{animation: rotate-frame 30s linear infinite;}</style>以上代碼實現的效果如下：
?
轉載于:https://www.cnblogs.com/web12/p/10023202.html
總結
以上是生活随笔為你收集整理的纯CSS实现立方体旋转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于 Bitbucket Pipelin
- 下一篇： Linux组管理和权限管理