css
Amazon book 書籍封面展示效果 (CSS 3D)
自從學了CSS 3D後，就一直想嘗試使用在網頁上，但除了形象網頁外，使用CSS 3D的網站似乎不是很多，畢竟這不是必要的效果。而最近在Amazon Books的購物商城上，發現他們有用CSS 3D在展示書籍的正反面。
本篇重點
試試看Amazon Books中的書籍展示效果，到底包含了些什麼CSS 語法。
效果展示
這效果我是做在codepen 上，裡面的封面圖片是直接連結台灣博客來書店，所以如果掉圖就是...被下架了。
在滑鼠滑過書上方時，書本會呈現微開，這會讓使用者感覺書本可以點擊(在Amazon Books中，點擊書本就可以看書的簡介)；而在hover過下方的flip to back時，書會翻轉30度，如果點擊則會翻轉180度，這樣就可以看到書的背面。
語法結構
題外話，最近我正在學slim，所以codepen上的html是用slim寫的，這邊就先介紹一下html的結構吧。
html結構
<div class="wrap">
<div class="imgWrap">
<img src="#..." alt="" class="first-child">
<img src="#..." alt="" class="second-child">
</div>
</div>
<a href="#" class="fliptoBack">|flip to back</a>
- .wrap 用途是來定位整體的位置
- .imgWrap 書本的外圍架構，並且做翻轉書本的效果
- img .first-child 書的正面
- img .second-child 書的背面
Js
在看CSS前，我想先說明js的部分，有些地方沒有辦法用css達成的，會用js去完成，避免等等css的誤解，先介紹一下我的script寫了什麼。
先取得第一張封面的寬高定義為w,h
w = $('.first-child').width();
h = $('.first-child').height();
//將外框及第二張圖設定成相同的寬高
$('.imgWrap, .wrap, .second-child').width(w);
$('.imgWrap, .wrap, .second-child').height(h);
滑過下方文字時，將書本套用'.flip'的class
$('.fliptoBack').hover(function() {
$('.imgWrap').toggleClass('flip');
});
點擊下方文字時，將書本套用'.flip180'的class
$('.fliptoBack').click(function() {
$('.imgWrap').toggleClass('flip180');
});
CSS
依慣例，我是用sass寫...，另外就是有點長。
$bookwidth: 60px //先定義書本的"厚度"
.wrap
+perspective(1200px) //3D的景深
position: relative
margin: 40px auto 20px auto
.fliptoBack //下方文字的位置
display: block
text-align: center
.imgWrap
+transform-style(preserve-3d) //先定義成transform3d的模式
+transition(transform .5s ease) //針對transform進行動畫
position: absolute
&:before //這一塊是要假裝成書的內頁
content: ""
position: absolute
width: 100%
height: 100%
+border-right-radius(5px)
background: black
&:after //這邊是書背
content: ""
position: absolute
left: 0
top: 0
height: 100%
width: $bookwidth
background: black
+transform3d(rotateY(90deg))
+transform-origin(0)
&.flip //在滑鼠掠過下方文字時，套用的'.flip'
+transform3d(rotateY(30deg)) //翻轉30度
&.flip180 //點擊時套用的'.flip180'，用來翻轉180度
+transform3d(rotateY(180deg) translateZ($bookwidth))
//另外再翻轉180度後，必須調整書本的Z軸，讓他在視覺上位置不變
img //兩張圖片的設定
position: absolute
top: 0
left: 0
border: #ccc 1px solid
+transition(transform .3s ease)
+backface-visibility(hidden) //不顯示背面
+border-right-radius(3px)
+box-sizing(border-box)
&.first-child //定義第一張圖片，並且滑鼠滑過時旋轉30度
+transform3d(rotateY(0deg))
+transform-origin(0)
z-index: 2
&:hover
+transform3d(rotateY(-30deg))
&.second-child //讓封底一開始時就反轉到另一面
+transform3d(rotateY(-180deg) translateZ($bookwidth))
CSS 3D很有趣，只是看起來code有點長，但是玩一段時間會很有成就感。
留言