css實現翻轉效果的方法：先建立一個示範方塊，並為其新增transition和transform屬性；然後將transition屬性加入到需要翻轉的p上；最後加上perspective和transform-style屬性即可。
本文操作環境：Windows7系統、HTML5&&CSS3版，DELL G3電腦
作為前端開發人員的必修課，CSS3能帶我們完成許多基本動效，本期我們將用CSS3實現hover翻轉效果~
第一步非常簡單，我們簡單畫1個演示方塊，為其添加transition和transform屬性：
// 本示例均使用Sass语法 .block { width: 200px; height: 200px; background: brown; cursor: pointer; transition: 0.8s; &:hover { transform: rotateY(180deg); } }
我們看一看這時候的效果：
#這裡需要注意的是：transition屬性要寫在.block上而不是hover上，如果只在hover上寫transition，則滑鼠移出時並沒有transition的過渡效果，如果我們只將transition寫在hover上：
#第二步比較關鍵：我們不難發現總是在1個平面上翻轉，不夠有立體感，因此我們需要稍加改變思路－用2層p嵌套
#// html部分
// CSS部分 .block { width: 200px; height: 200px; cursor: pointer; &-in { background: brown; height: 100%; transition: 0.8s; } &:hover .block-in { transform: rotateY(180deg); } }
此時效果沒變，如下：
這個時候關鍵的1步驟來了：我們需要為外層加入perspective和transform-style屬性，為整個動畫增添3D變形效果：
.block { width: 200px; height: 200px; cursor: pointer; /* 3D变形 */ transform-style: preserve-3d; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; &-in { background: brown; height: 100%; transition: 0.8s; } &:hover .block-in { transform: rotateY(180deg); } }
最終實作效果如下：
最終我們總結一下想法：
1.建立內外2層p，滑鼠hover 到外層時，內層p加入翻轉transform: rotateY(180deg)
2 .注意將transition 屬性加入到需要翻轉的p上，而不是hover 時
3.外層p加入perspective 和transform-style 屬性，最終實作3D翻轉效果
#推薦學習：《css影片教學》
以上是css怎麼達到翻轉效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
