CSS3圖片翻轉切換案例及其中重要屬性解析

圖片翻轉切換，在不使用CSS3的情況下，一般都是使用JS實現動畫，同時操作元素的width和left,或者height和top以模擬翻轉的效果，並在適當時候改變src或者z-index實現圖片切換。

無意中發現CSS3的方案，http://www.webhek.com/css-flip/  趕緊學習並總結如下

先上程式碼（多數照搬自上述鏈接，有很大兼容問題，小心使用）

HTML：

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flipper"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 

CSS:

<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
    -webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.flipper </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span>
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 触发翻转 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container:hover .flipper</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;

}<span style="color: #800000;">
.front ,.back</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;">重要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;
}

• 在最外層的容器元素上設定整個動畫區域的透視(perspective)屬性。
• 當外層容器元素遇到滑鼠懸停事件時，內部存放卡片的容器會旋轉180度。這裡也是控制旋轉速度的地方。如果將旋轉值設為-180deg，則是反向旋轉。
• 表示卡片正面和背面的元素都要絕對定位，這樣它們才能在相同的位置相互遮擋。它們的背面可視性(backface-visibility)屬性設定為隱藏，這樣每個卡片的背面在翻轉時都是看不見的。
• 將卡片的正面設定為一個比背面要高的z-index值，這樣保證卡片的正面在最上面。
• 將背面卡片旋轉180度，這樣讓它扮演背面的角色。

照搬結束，其中CSS中註釋了重要的需要特別注意。

perspective 屬性定義 3D 元素距視圖的距離，以像素計。直覺現象就是內層的元素在翻轉時會溢出外層邊框，如果不寫，或屬性值為0，則只在外層邊框內變化。

且屬性值需要特別注意和需要翻轉的元素的寬高相適應，太少溢出很誇張，太多了和設為0的區別不大。區別效果如下圖

transform-style: preserve-3d; transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素（照抄自w3cschool）。

flip-container 和 flipper 都需要設置，flip-container不設置會導致溢出的3D效果缺少，flipper 不設置則容器翻轉後，我們看到的還是front的背面，backface-visibility: hidden不能體現效果。

比較坑的是transform-style即使在IE11中都是不支持的。

所以還有一個相容IE的方案，就是不翻轉容器，而是同時翻轉front和back,幸好IE還是支援backface-visibility: hidden的，所以翻轉效果和上一個方案一致。

HTML如下：

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="flip-container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="front"</span><span style="color: #0000ff;">></span>here is content : AA<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="back"</span><span style="color: #0000ff;">></span>here is content : BB<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>  

由於直接翻轉front和back，flipper就顯得多餘了，去掉了flipper。

CSS代碼如下（經過多方試驗，盡量支援各個瀏覽器，並降級處理了不支援CSS3翻轉的瀏覽器，保留了切換效果）

 

<span style="color: #800000;">.flip-container </span>{<span style="color: #ff0000;">
    -webkit-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -moz-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 500</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> perspective(500px)</span>;<span style="color: #ff0000;">
    -moz-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    -ms-transform-style</span>:<span style="color: #0000ff;"> preserve-3d</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #aaa</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">由于内层绝对定位导致高度缺少，这里显式设置了宽高</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.flip-container, .front, .back </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">

.flip-container:hover .front </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}<span style="color: #800000;">
.flip-container:hover .back </span>{<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(0deg)</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 降级处理不支持CSS3的浏览器，只是简单的将back上升盖住front </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

.front, .back </span>{<span style="color: #ff0000;">
    -webkit-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -moz-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -ms-backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    backface-visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    -webkit-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -moz-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -o-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    -ms-transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 0px</span>;
}<span style="color: #800000;">
.front </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;
}<span style="color: #800000;">
.back </span>{<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -o-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    -ms-transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(-180deg)</span>;
}

以上也許有許多不必要的兼容代碼，水平有限了，歡迎交流更簡練的寫法。

還有一個小TIPS，在其他情況使用hover觸發元素翻轉時應如下使用，固定寬高的父元素觸發，子元素翻轉

<span style="color: #800000;">.outer </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;
}<span style="color: #800000;">
.inner </span>{<span style="color: #ff0000;">
    transition</span>:<span style="color: #0000ff;"> 0.6s</span>;
}<span style="color: #800000;">
.outer:hover .inner</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}

如下直接對元素hover觸發翻轉會有很大的使用問題，因為元素翻轉過程中，元素區域變小，遊標就脫離元素了，於是元素還原，又觸發hover變小，造成不順暢

<span style="color: #800000;">.inner </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<br>　　transition: 0.6s;
}<span style="color: #800000;">
.inner:hover</span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(180deg)</span>;
}