先欣賞一下該特效的最終效果
該特效是基於css3的一些新特性拼接而成.主要用到了hover,transform和@keyframe屬性.下面簡述一下這三個屬性的作用.
詳情參考
hover
效果:當滑鼠移到元素上時會展現你定義的hover的樣式
使用方法:假定我們有乙個類,名為mystyle.修改它的css樣式的方式是.mystyle{}.修改它的css hover樣式的方式是.mystyle:hover{}.
transform
效果:對元素進行旋轉、縮放、移動或傾斜
使用方法:傳入旋轉rotate(angle),縮放scale(x,y),移動translate(x,y),傾斜skew(angle)的引數進行屬性的修改
@keyframe
效果:實現動畫效果
使用方法:@keyframe 後+動畫名
為了方便理解,我們先看一張旋轉的demo版
**解析
接下來是特效實現的完整**覺得文章不錯,點個贊和關注吧.
3D 旋轉立方體
source cube src.js var cube function this.5 function d,e,a if e if a this.1 this.1 function p j,g,b,o this.7 function this.3 function this.4 function ...
3D立方體旋轉
1 首先要知道3d,x軸，y軸，z軸的方向 如圖所示 2 要想做乙個立方體首先是做6個面 以中間為基準 中間向前面平移150px transform translatez 150px 後面也平移150px,然後旋轉 rotatey 180deg 這樣前後面就做完了。左 以中間為準逆時針針旋轉90度 ...
用css實現3D立方體旋轉特效
先來看執行後出來的效果 它是在不停執行的乙個立方體 先來看html部分的 div class rect wrap div class container div class top slide div div class bottom slide div div class left slide d...