CSS3之設計動態立體盒子

css3設計3d效果圖

使用到css3中的變形、縮放、傾斜。

只寫了相容gecto的。發張鼓勵自己

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
<
style
>
.cube
.cube p
.cube h2
.cube.one
.topface, .leftface, .rightface div 
/*統一三面的尺寸
*/.topface, .leftface, rightface 
/*統一三立面絕對定位
*/.cube:hover .topface, .cube:hover .leftface, .cube:hover .rightface
.cube:hover .topface:hover, .cube:hover .leftface:hover, .cube:hover .rightface:hover 
.leftface 
/*變形左邊
*/.rightface
.topface div 
/*變形頂面
*/.topface
style
>
head
>
<
body
>
<
div 
class
="cube one"
>
<
div 
class
="topface"
>
<
div>
<
h2>頂面
h2>左面
h2>正面
CSS3立體盒子的製作
效果如下 3d基礎知識 軸向現在就開始寫我們的 吧 首先是我們的html結構,我們這裡只寫乙個立體正方形.首先乙個正方形得有六個相同面上下左右前後,相應我們去寫六個html元素.class cube class small 上div class small 下div class small 左div...
CSS3之盒子模型
display box 使子元素成行排列 如果父級寬度小於子級盒子 不會把超出部分擠出下面 而是直接超出 box orient vertical使盒子垂直顯示 預設水平顯示 box direction reverse使盒子排列順序顛倒 box ordinal group 設定元素排列的具體位置 bo...
css3 彈性盒子
display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...