css3簡單動畫實例，實現魔方的動畫

1、涉及的css屬性：

　　（1）父元素樣式中：

?????? transform-style: preserve-3d;/*規定子元素以3D顯示*/

?????? animation:mofang 10s linear infinite;/*定義的動畫名、動畫完成的總時間、曲線樣式、永久執行（infinite）*/

?? （2）@keyframes 動畫名{}：定義動畫操作

　　??? 可以使用from{}和to{}定義

　　　　也可以使用百分比定義，0%{}50%{}100%{}

2、注意點

　　（1）X、Y、Z軸的方向確定：先想一個平面，即是X軸和Y軸，再想你的視線距離這個平面的距離指向，即Z軸（遠小近大）；可以伸出左手，大拇指是Y軸，食指是X軸，中指是Z軸（即中指是面向自己的）。

　　css3中的3D坐標系：

　　　　　　

　　（2）rotate(旋轉)時，坐標軸也會隨著旋轉，要區分是先移動再旋轉，還是先旋轉再移動，因為兩者執行之后的結果顯示是不一樣的。

　　（3）transform多個屬性值，執行順序，是按照從左向右執行。

　　（4）在魔方中確定坐標軸：可以想象將一個木板垂直插入一個魔方的正中間，魔方的六個面分別是這個木板通過旋轉、平移形成了不同的面。

3、實例

　　<style>
??????? ul{
??????????? list-style-type: none;
??????????? margin: 0;
??????????? padding: 0;
??????? }
??????? .box{
??????????? width:300px;
??????????? height:300px;
??????????? margin: 150px auto;
??????????? position: relative;
??????????? font-size: 50px;
??????????? /*所有元素保留3D轉換*/
??????????? transform-style: preserve-3d;
??????????? /*動畫效果*/
??????????? animation: mofang 10s linear infinite;
??????? }
??????? .box > div{
??????????? width:300px;
??????????? height:300px;
??????????? position: absolute;
??????? }
??????? li{
??????????? float: left;/*讓li浮動*/
??????????? width:90px;
??????????? height:90px;
??????????? margin: 5px;
??????????? line-height: 90px;
??????????? text-align: center;
??????????? border-radius: 20px;
??????? }
??????? /*每個div下的li背景*/
??????? .before li{
??????????? background-color:red;
??????? }
??????? .back li{
??????????? background-color: #ba9304;
??????? }
??????? .top li{
??????????? background-color: deeppink;
??????? }
??????? .bottom li{
??????????? background-color: blueviolet;
??????? }
??????? .left li{
??????????? background-color: greenyellow;
??????? }
??????? .right li{
??????????? background-color: blue;
??????? }
??????? /*轉換之后的效果，下面容易暈*/
??????? .before{
??????????? background-color: transparent;
??????????? transform: translateZ(150px);
??????? }
??????? .back{
??????????? background-color: transparent;
??????????? transform:translateZ(-150px) rotateY(180deg);
??????? }
??????? .top{
??????????? background-color: transparent;
??????????? transform:rotateX(90deg) translateZ(150px) rotateZ(180deg);
??????? }
??????? .bottom{
??????????? background-color: transparent;
??????????? transform:rotateX(-90deg) translateZ(150px);
??????? }
??????? .left{
??????????? background-color: transparent;
??????????? transform:rotateY(-90deg)? translateZ(150px);
??????? }
??????? .right{
??????????? background-color: transparent;
??????????? transform:rotateY(90deg) translateZ(150px);
??????? }
??????? @keyframes mofang {
??????????? from{
??????????????? transform:rotateY(0deg) rotateX(0deg);
??????????? }
??????????? to{
??????????????? transform:rotateY(135deg) rotateX(45deg);
??????????? }
??????? }
??? </style>

　　<div class="box">
??? <div class="before">
??????? <ul>
??????????? <li>1</li>
??????????? <li>2</li>
??????????? <li>3</li>
??????????? <li>4</li>
??????????? <li>5</li>
??????????? <li>6</li>
??????????? <li>7</li>
??????????? <li>8</li>
??????????? <li>9</li>
??????? </ul>
??? </div>
??? <div class="back">
??????? <ul>
??????????? <li>1</li>
??????????? <li>2</li>
??????????? <li>3</li>
??????????? <li>4</li>
??????????? <li>5</li>
??????????? <li>6</li>
??????????? <li>7</li>
??????????? <li>8</li>
??????????? <li>9</li>
??????? </ul>
??? </div>
??? <div class="top">
??????? <ul>
??????????? <li>1</li>
??????????? <li>2</li>
??????????? <li>3</li>
??????????? <li>4</li>
??????????? <li>5</li>
??????????? <li>6</li>
??????????? <li>7</li>
??????????? <li>8</li>
??????????? <li>9</li>
??????? </ul>
??? </div>
??? <div class="bottom">
??????? <ul>
??????????? <li>1</li>
??????????? <li>2</li>
??????????? <li>3</li>
??????????? <li>4</li>
??????????? <li>5</li>
??????????? <li>6</li>
??????????? <li>7</li>
??????????? <li>8</li>
??????????? <li>9</li>
??????? </ul>
??? </div>
??? <div class="left">
??????? <ul>
??????????? <li>1</li>
??????????? <li>2</li>
??????????? <li>3</li>
??????????? <li>4</li>
??????????? <li>5</li>
??????????? <li>6</li>
??????????? <li>7</li>
??????????? <li>8</li>
??????????? <li>9</li>
??????? </ul>
??? </div>
??? <div class="right">
??????? <ul>
??????????? <li>1</li>
??????????? <li>2</li>
??????????? <li>3</li>
??????????? <li>4</li>
??????????? <li>5</li>
??????????? <li>6</li>
??????????? <li>7</li>
??????????? <li>8</li>
??????????? <li>9</li>
??????? </ul>
??? </div>
</div>

注意：li要設置浮動顯示，不然不會在一個面。

僅是一個簡單實例，記錄總結一下。復雜的動畫自己再慢慢嘗試。

　　

轉載于:https://www.cnblogs.com/lfjblog/p/9566325.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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