本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-12 (建議使用Chrome瀏覽器)
鐵人賽快要結束了，今明兩天會介紹純CSS可以做些什麼特別的效果。今天要介紹的是專輯相簿的效果，而明天是要介紹純CSS的自適應動態選單。

參考來源 : http://codepen.io/anon/pen/hixjL
建立html

<div class="cover">
  <div class="coverflow-list">
    <input type="checkbox" name="cover-item" id="cover-1">
    <div class="coverflow-item">
      <label for="cover-1">
      <figure class="album-cover">
        <img src="/images/mayday/001.jpg" alt="">
      </figure>
        <figcaption class="album-name">為愛而生</figcaption>
      </label>
    </div>
  </div>
</div>
<div class="controllor">
<label for="cover-1">遠端遙控器</label>
</div>

首先準備好需要的html，有些重點可以讓大家了解。
checkbox 中的id記得設定
id是唯一的
label中的for的值會對應到checkbox的id
label可以重複使用，for的值對應相同ID即可
設定基本樣式
這一部分只是先設定基本樣式，就不多闡述了。

.coverflow-item
  display: inline-block
  position: relative
  margin: 0 auto
  text-align: center
  .album-cover
    height: 150px
    width: 150px
    img
      opacity: 0.5
  .album-name
    text-align: center
    display: block
    color: #777
  label
    display: block

設定3D樣式
在先前的文章有依序介紹許多transform的樣式設定，如果仔細看其實都是前幾個章節介紹的。

.coverflow-list
  +perspective(900px) //設定3D景深距離
  +transform-style(preserve-3d)
  +perspective-origin(100% 30%) //3D透視的視點
  .coverflow-item
    +transition(all .3s ease) //transition動畫
    +transform(rotateY(45deg)) //y軸旋轉45度，這邊都是用中心點都軸心

套用checkbox效果
這步驟有兩個重點一個是checked(被選取)另一個則是+(相鄰)，所以要進行變化的元素必須緊貼著checkbox元素。

input[type="checkbox"]
  display: none //隱藏checkbox
  &:checked //如果被選取時的效果
    &+.coverflow-item //如果被選取時 其他相鄰元件效果
      +transition(all .3s ease)
      +transform(rotateY(0.1deg))
      margin: 0 auto
      img
        opacity: 1
      .album-name
        color: #333

只要善用label中的for對應input的ID，無論多遠的距離的可以控制，接下來只要就是控制checkbox的相鄰物件狀態，就可以達到這樣的效果。

Demo

這一個部分是用html+CSS構成，而其中的重點是上面所介紹的label及checkbox，在本區雖然把checkbox換成了radio，但概念上是差不多的；另外一個重點則是Css selector中的~，他可以選取目前元素後方所有同層級的元素，讓這一個CD相簿有三種角度。

Html 原始碼
原始碼相當的長，我就只擷取部分作為範例。

<div class="test">
<div class="cover">
  <ul class="coverflow-list">
    <input type="radio" name="cover-item" id="cover-1">
    <li class="coverflow-item">
      <label for="cover-1">
        <figure class="album-cover">
          <img src="/images/mayday/001.jpg" alt="">
        </figure>
        <figcaption class="album-name">為愛而生</figcaption>
      </label>
    </li>
    ...略
  </ul>
</div>
  <div class="controllor">
    <label for="cover-1">1</label>
    <label for="cover-2">2</label>
    <label for="cover-3">3</label>
    <label for="cover-4">4</label>
    <label for="cover-5">5</label>
    <label for="cover-6">6</label>
  </div>
</div>

如果有少Div結尾，請不要太在意，只是我沒copy到而已...
這一段html和上次比較不同的地方，就是把checkbox改成了radio，radio在用法上是屬於單選題，而checkbox是屬於多選題；只要input屬性name都是相同的，都算是一個群組，而這一個群組就只能一個被選擇。

Sass

.coverflow-item
  display: inline-block
  position: relative
  margin: 0 auto
  text-align: center
  margin: 0 -45px
  background-color: white
  .album-cover
    height: 150px
    width: 150px
    -webkit-box-reflect: below 22px -webkit-linear-gradient(rgba(255,255,255,0)85%, white 150%)
    box-reflect: below 22px linear-gradient(rgba(255,255,255,0) 85%, white 150%)
    //專輯反射
    img
      opacity: 0.5
  .album-name
    text-align: center
    display: block
    color: #777
  label   
    display: block
    
.coverflow-list
  +perspective(900px)
  +transform-style(preserve-3d)
  +perspective-origin(100% 30%)
  .coverflow-item
    +transition(all .3s ease)
    +transform(rotateY(45deg))
input[type="radio"]
  display: none
  &:checked
    &+.coverflow-item
      +transition(all .3s ease)
      +transform(rotateY(0.1deg))
      margin: 0 auto
      img
        opacity: 1
      .album-name
        color: #555
      &~.coverflow-item
        +transform(rotateY(-45deg))
      //重點語法 將被選取的Radio後方全部都反方向轉45度
.controllor
  margin-top: 40px
  label
    cursor: pointer
    color: #999
    padding: 8px
    border: 1px solid #ccc
    background-color: #fafafa
    +transition(all .3s)
    &:hover
      color: #555
      border: 1px solid #555

這一部分可以著重的重點就是放在CSS selector的~語法，再被選取的radio後方，進行反向Y軸旋轉的動作。