用CSS實現3D魔方動畫旋轉

2021-07-31 09:16:49 字數 2751 閱讀 1115

這裡呢主要是用我們的div標籤來對魔方的各個面及各個塊進行實現，先上乙個主體的html**吧
我們可以看到有乙個id=box的div，這就是我們一整個魔方的的樣子的啦，那麼我們就現在裡面設定一下css樣式吧

#box
在這裡我們設定了box的一些基本屬性，其中最重要的兩句話就是

-webkit-transform-style: preserve-3d;


transform-style: preserve-3d;
這兩句話是使整個box具有3d視角的基礎

（兩句話分別對webkit核心瀏覽器和w3c標準的瀏覽器進行了相容）

做了乙個大的設定後，我們開始對魔方的每個面進行設定，首先我們把他們共有的一些屬性都抽出來

#box div
敲黑板！！這裡最好把position設定為absolute，不然對之後的一些改變會很麻煩

這個時候我們看到的東西應該就是漆黑一片的乙個正方體，因為這個時候是6個面疊在一起

那麼接下來就開始讓每個面進行乙個3d變化，但在這之前，我們需要先了解乙個css3新增的屬性transform，在這裡就簡單講幾個跟我們3d魔方相關的幾個東西，詳情

css手冊transform屬性

transform：translatex(90px);
這句話的意思是往x軸的正方向（即電腦螢幕向右）平移90px，同理，將x換做y（正方向為電腦螢幕向上）或z（正方向為電腦螢幕指向自己的方向）也會有相應的效果。

transform: rotatex(-90deg)
這裡是指沿著x軸旋轉-90度，如果沒有特別指定

transform-origin（設定或檢索物件以某個原點進行轉換），則預設為以中心點進行旋轉，同理，將x換做y或z也會有相應的效果

大概了解了這些，我們便可以開始讓我們6個面進行立體變化了，首先我們先想好乙個東西，就是這個魔方的中心點，在這裡我們將魔方的中心設定在我們現在看到的正方形的中心（預設的transform-origin），那麼第乙個面

.one
我們先讓它往z軸移動90px，那麼久會離我們視線變近

第二個面就開始不一樣了

.two
我們來解析一下這一小段**，首先這個面是往z軸方向移動了90px和第乙個面重合，然後繞著x軸旋轉，就像體操運動員一樣向上翻轉，翻轉根據的x軸就是預設的transform-origin

淺藍色的面為第乙個面，深藍色的面為第二個面，以紅色的點為中心點進行旋轉變化，同樣的，其他幾個面也可以先進行z軸移動，再進行旋轉得到（**不詳細寫出，效果圖如下）

6個面完成後，就要開始對每個面裡面的小方塊進行設定了

#box .one div
這裡將一整個面的所有方塊都進行了設定，最主要是前面的5句，因為父元素設定了position:absolute，因此需要將其轉化為relative，將每個小塊都轉化成行內塊級元素，並進行浮動，使它們能夠對齊排列，而剩下的**就是對每個面的方塊的個性化設定，大家可以自己設定顏色邊距等（注意width和height大小，如果加了border就要將div的width和height調小，以免超出範圍）

最終的效果如下

有人可能會問，為什麼筆者的可以看到3d效果，但自己的卻不行，那你可以試一下在#box中加入這句

-webkit-transform: rotatex(30deg) rotatey(44deg);
然後用瀏覽器的除錯模式，改一下數值就好，這裡就是將整個魔方進行翻轉的屬性。

如果要實現動態效果，那麼#box中的一些東西，就要增加了，接下來給大家看看#box裡面的完整**

#box
首先一定要設定寬高，這樣transform-origin才可以在center的位置，如果不設定的話，也可以，把transform-origin改為如下，但位置效果會有些奇怪，需要另外調整

-webkit-transform-origin: 90px 90px 0;


transform-origin: 90px 90px 0;


css參考手冊animation


我們需要另外再設定乙個東西就是，要做什麼動畫


@-webkit-keyframes animations


25% 


50% 


75% 


100% 


}keyframes animations 


25% 


50% 


75% 


100% 


}
這樣和#box結合起來，就是魔方在2s內圍繞著中心點進行旋轉，從而我們可以看到不同的面，當然，裡面的數值，大家可以進行更改，從而實現不一樣的動畫效果

純CSS做3D旋轉魔方

昨天偶然看見 簡單說 用css做乙個魔方旋轉的效果 做的乙個3d旋轉魔方 效果就是本部落格右側公告欄所示 在這裡把做法展現出來 感興趣的可以試試 做成自己特有的魔方 1 doctype html 2 html 34 head 5 meta charset utf 8 6 style 7 最外層容器樣...

用CSS動畫和3D旋轉實現的相簿

在開始前先了解下css的動畫和3d旋轉的屬性。1.transition 過渡 特點 需要事件進行觸發。2.animation 動畫 特點 不需要事件進行觸發。呼叫關鍵幀即可 它的屬性值 常用的寫法 animation 關鍵幀的名稱 動畫運動的時間 linear 勻速 動畫延遲的時間 制定關鍵幀 ke...

CSS3動畫 3D旋轉

學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...