使用css3 實現3d正反翻轉特效

2021-10-02 01:48:06 字數 1326 閱讀 3902

首先，上傳一下最終效果：

接下來，我們按照結構來實現當前的demo效果：

...
設定.item的perspective屬性距離，就是3d效果的z軸距離，瀏覽器預設就xy兩個軸向，css3增加了z軸，就是當前2d平面的3d距離，單位是畫素。我們在這裡設定了3d距離是perspective:500px;

正面


背面
.box作為翻轉的容器，我們需要通過css將其轉換為3d翻轉樣式，並設定了變換時間為1秒：

transition


:all 1s;


transform-style


: preserve-3d;
並在滑鼠懸停在.item上面的時候，讓.box沿y軸翻轉180度：

.item:hover .box
實現到這裡以後，我們基本就實現了可以翻轉，接下來還要實現盒子裡面正反面都有內容。

正面背面
做第二步的時候，我們也可以發現，在翻轉的div .box內建立了兩個div 正面乙個背面乙個，首先我們把這兩個盒子都設定絕對定位，兩個盒子都設定翻轉盒子的寬高

position


: absolute;


top:0;


left


:0;width


:100%;


height


:100%;


text-align


: center;


line-height


: 200px;
接下來重點來了，我們如何設定翻轉以後，讓盒子在背面不可見（預設盒子翻轉以後還是可見的），需要用到css屬性backface-visibility，我們將其設定一下：

backface-visibility


: hidden;
還有最後一步，就是讓.back的div預設反向顯示，只需要讓其沿y軸旋轉180度即可：

.back
這樣，就完成了乙個翻轉的案例，下面放上全部**：

"item">


"box">


"font">正面


"back">背面

CSS3實現3D立體效果

css3實現3d效果 1.涉及到的幾個css3屬性 首先大家需要了解transform屬性，主要有平移 translate 縮放 scale 拉伸 skew 旋轉 rotate 這裡涉及到3d轉換的主要介紹旋轉。下面通過一組rotate效果直觀理解rotatex,rotatey,rotatez區別。...

純CSS3 實現3D魔方

1 思路 父盒子給子盒子開啟立體空間，並開啟透視，設定視距 子盒子設定擺放位置，與我們畫的正方體類似，按照平面正方體每個面的拜訪位置，我們通過旋轉 平移達到擺放的效果 父盒子設定過渡 滑鼠懸停到父盒子，子盒子做出的行為，分別向各自的方向擴散，並且側面要有一定的旋轉，為90 使其達到我們想看到的開啟效...

CSS3實現3D盒子效果

近日，看到了css3中，設計動態立體盒子的例子，覺得比較新奇，所以研究了下，加以自己的拙見，設計了如圖所示的例子，拿來給大家分享 此圖為firefox下的截圖 這跟 3d盒子 的實現方式一樣，我的盒子也是以它為原型來設計的。整個盒子的html結構很簡單，如下 後下 左前上右 一，盒子定位 首先初始化...