效果如圖：
實現**：
1.html：
2.css：
設定父元素：
.door設定子元素：
.in3.滑鼠點選時：
.door:hover .in完整**：
注意：
1.父元素設定為相對定位，子元素設定為絕對定位。perspective（透視）屬性設定在父元素上，才可對子元素起作用。
2.需要給誰設定3d轉換，那滑鼠點選事件就把過渡屬性及3d轉換後的位置（top,right,bottm,left）設定在誰上面。
參考部落格：
過渡效果額和3d轉換筆記
1 過渡 transitions 使乙個樣式逐漸過渡到另乙個樣式。語法 transitons property 初始形狀 duration 持續時間 timing function 過渡時間曲線 delay 滑鼠上去馬上過渡 a.屬性名稱 b.定義過渡時所需的時間 c.linear 相同速度 eas...
2D轉換 3D轉換
轉換是使元素改變形狀 尺寸和位置的一種效果。能夠對元素進行移動 縮放 轉動 拉長或拉伸。2d轉換 瀏覽器相容 1 internet explorer 10 firefox 以及 opera 支援 transform 屬性。2 chrome 和 safari 需要字首 webkit 3 interne...
3d轉換經驗分析
總結 旋轉的時候 如 rotatex 角度 tansform origin left center 或者 right center rotatey 角度 transform origin center top 或者 center bottom 1.面朝前 y軸左側旋轉 角度旋轉為負值 相當於面在前 ...