CSS3實現3D盒子效果

2022-09-03 22:15:28 字數 1642 閱讀 4528

近日,看到了css3中,設計動態立體盒子的例子,覺得比較新奇,所以研究了下,加以自己的拙見,設計了如圖所示的例子,拿來給大家分享:(此圖為firefox下的截圖)

這跟「3d盒子」的實現方式一樣,我的盒子也是以它為原型來設計的。

整個盒子的html結構很簡單,如下:後下

左前上右

一,盒子定位

首先初始化盒子的寬,高,背景色等,然後開始定位六個面,我是先從簡單的四個面開始,這四個面分別是「前、後、左、右」,最後定位「上、下」,定位四個比

較簡單的面的時候你會發現,前面跟後面「-moz-transform」屬性是一樣的,你只不過把top跟left屬性設定下就好了,當然,左面跟右面也

一樣。稍微有點不同的是上面跟下面,細心的可能會發現他們分別又巢狀了個div,這是因為他們不近要設定「skewy、scaley」還需要設定

「rotate」,當然他們是不能在乙個div裡寫,因為「旋轉」跟「斜切」他們之間會有影響。簡單的說

「旋轉後斜切」-moz-transform:rotate(-40deg) skew(30deg,20deg);

「斜切後旋轉」-moz-transform:skew(30deg,20deg) rotate(-40deg);

body

.cube

.backface,.bottomface div,.leftface,.frontface,.topface div,.rightface

.backface

.bottomface

.leftface

.frontface

.topface

.rightface

.bottomface div

.topface div

對於盒子的邊框線,這裡不建議用border來寫,因為如果用border來寫的話,border的寬度會跟width重疊,導致盒子佔據的空間為150+1+1=152px,,而且border也不貼著邊界,所以我建議用box-shadow來寫:

box-shadow與text-shadow一樣,只不過box-shadow給div等元素增加邊框線,而text-shadow給文字增加描邊。

舉個簡單的例子:

box-shadow:2px 0px 0px red,0px -2px 0px red,-2px 0px 0px red,0px 2px 0px red;

此引數跟padding、margin的引數類似,順序仍是上、右、下、左。

二、開啟盒子

開啟盒子的**也比較簡單,效果圖如下:

**如下:

.cube .frontface:hover

此外,我在盒子的底部還增加了投影的效果,如果需要的話可以增加試試。

因為我對色彩沒有什麼研究,所以做出來的盒子沒有那麼美觀,有興趣的朋友可以指點,幫忙美化下!

CSS3實現3D立體效果

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

css3動畫效果和3D模型

今天了解了css3的動畫漸變效果,如果我們要對頁面中的某個元素的樣式進行變化,就不用js或jquery苦苦的寫 了,直接用css3的這個transition這個屬性就ok,方便快捷,下面請看demo。我要對某個div操作,例如 當滑鼠移入div中,改變其width height和background...

css3的3D位移效果講解

lang en charset utf 8 3d位移的demotitle perspective 定義3d元素距離檢視的距離 以畫素為單位 當給乙個元素定義perspective屬性的時候,其 子元素 就獲得了乙個透視效果,元素本身並沒有 設定人眼到螢幕平面的距離,只影響3d元素,不影響2d元素 所...