純CSS實現可切換旋轉的立體小盒子

好久沒更新了，咳咳。

情況是這樣的，周五在公司前端組開技術分享會，擔心乾貨不夠，所以周四晚上連夜寫了這麼乙個demo出來譁眾取寵，實際上效果還是挺不錯的，這次裝了一手好逼，只不過當時組內的妹子們都沒來，沒能看到這盛大的場面，唉，簡直遺憾至極。

先把demo上了：

用css3實現立體的盒子其實挺簡單的，其核心就是css3的transform變換。

更詳細的介紹請移步張大大的文章：《css3 3d transform變換，不過如此！》

我在這邊簡單說下本demo的原理：

1. 用乙個div.cube-wrap做外部容器，並給其設定 -webkit-perspective相關屬性;

.cube-wrap

注：可以調整perspective和perspective-origin的值來看效果，一看即懂

2.再用乙個div.cube做內部容器

.cube

其實一般的話只要一層容器就夠了，直接把perspective設定在body上。但是因為本demo有個放大的效果，單層容器似乎做不到~~，所以用了兩層。

3.在內部容器放6個div來充當6個面，然後運用transform變換來讓它們組成乙個立體的小盒子

.cube-face

.cube-face-top
.cube-face-top:after,
.cube-face-bottom:after
.cube-face-left
.cube-face-left:after,
.cube-face-right:after
.cube-face-front
.cube-face-back
.cube-face-right
.cube-face-bottom

裡面的幾個::after是為了在給其中幾個面加上陰影，讓效果更「真實」一點

5.現在的話乙個立體的小盒子已經完成了，不過需要把內部容器.cube旋轉一下，才能看到效果，我們用一排按鈕來實現對.cube的transform:rotate的控制：

#show-front:checked ~ .cube-wrap .cube

#show-back:checked ~ .cube-wrap .cube
#show-left:checked ~ .cube-wrap .cube
#show-right:checked ~ .cube-wrap .cube
#show-top:checked ~ .cube-wrap .cube
#show-bottom:checked ~ .cube-wrap .cube

看吧，這裡又用到了:checked和~的神奇組合。

完整的dom結構如下

front

back
topleft
right
bottom
front
back
topbottom
left
right
zoom

完整的css**如下

html,body

.cube-wrap
#zoom-cube:checked ~ .cube-wrap
.cube
#show-front:checked ~ .cube-wrap .cube
#show-back:checked ~ .cube-wrap .cube
#show-left:checked ~ .cube-wrap .cube
#show-right:checked ~ .cube-wrap .cube
#show-top:checked ~ .cube-wrap .cube
#show-bottom:checked ~ .cube-wrap .cube
.cube-face
.cube-face i
.cube-face-top
.cube-face-top:after,
.cube-face-bottom:after
.cube-face-left
.cube-face-left:after,
.cube-face-right:after
.cube-face-front
.cube-face-back
.cube-face-right
.cube-face-bottom
input
.button-wrap
.button-wrap label
.button-wrap:hover label
.button-wrap label:hover
#show-front:checked ~ .button-wrap .for-front,
#show-back:checked ~ .button-wrap .for-back,
#show-left:checked ~ .button-wrap .for-left,
#show-right:checked ~ .button-wrap .for-right,
#show-top:checked ~ .button-wrap .for-top,
#show-bottom:checked ~ .button-wrap .for-bottom,
#zoom-cube:checked ~ .button-wrap .for-zoom-cube

照舊只是演示，所以只加了-webkit-字首。

好了，就這樣了，各位週日愉快！

純css實現tab切換

所用技術有 css選擇器 相鄰兄弟選擇器 element element 用於選取第乙個指定的元素之後的緊跟的元素，該元素是被選取元素的兄弟 不是內部 element1 element2 它可以element1之後所有的element2 兩元素必須擁有相同父元素，但是element2不必直接緊隨el...

純css實現tab切換

前端開發中，經常會用到tab切換，最常用的做法是使用js處理顯示與隱藏，然而在h5開發中，完全可以做到利用css3的偽類選擇器實現這個效果，遺憾的是在ie8及以下，不可用。先看整體效果 為方便感興趣的朋友，直接上 html結構 tab1 tab2 tab3 content 1 顯示 content ...

純CSS3浮雕質感的立體文字旋轉動畫

還記得之前分享過乙個css3 文字3d翻轉特效，這個效果讓文字有一種立體的視覺效果。今天要分享的這款css3文字動畫特效更加炫酷，它不僅有立體的3d效果，而且文字整體展現出一種浮雕質感的視覺效果，並且伴隨著旋轉。效果圖如下 實現的 html div class stage div class lay...