簡單幾步用純CSS3實現(xiàn)3D翻轉(zhuǎn)效果

zhoutk 發(fā)布于2019-04-23 11:43 / 3170人閱讀

摘要：作為前端開發(fā)人員的必修課，翻轉(zhuǎn)能帶我們完成許多基本動效，本期我們將用實現(xiàn)翻轉(zhuǎn)效果第一步非常簡單，我們簡單畫個演示方塊，為其添加和屬性本示例均使用語法我們看一看這時候的效果這里需要注意的是屬性要寫在上而不是上，如果只在上寫，則鼠標(biāo)移出時并沒有

作為前端開發(fā)人員的必修課，CSS3翻轉(zhuǎn)能帶我們完成許多基本動效，本期我們將用CSS3實現(xiàn)hover翻轉(zhuǎn)效果~

第一步非常簡單，我們簡單畫1個演示方塊，為其?添加transition和transform屬性?：

1 2 3 4 5 6 7 8 9 10 11 // 本示例均使用Sass語法 .block { ??width: 200px; ??height: 200px; ??background: brown; ??cursor: pointer; ??transition: 0.8s; ??&:hover { ????transform: rotateY(180deg); ??} }

我們看一看這時候的效果：

這里?需要注意?的是：?transition屬性要寫在.block上而不是hover上?，如果只在hover上寫transition，則鼠標(biāo)移出時并沒有transition的過渡效果，如果我們只將transition寫在hover上：

第二步比較關(guān)鍵：我們不難發(fā)現(xiàn)始終在1個平面上翻轉(zhuǎn)，不夠有立體感，因此我們需要稍加改變思路——?用2層div嵌套css3背景動畫

1 2 3 4 // html部分 <div class="block"> ????<div class="block-in">div> div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // CSS部分 .block { ??width: 200px; ??height: 200px; ??cursor: pointer; ?? ??&-in { ????background: brown; ????height: 100%; ????transition: 0.8s; ??} ??? ??&:hover .block-in { ????transform: rotateY(180deg); ??} }

此時效果沒變，如下：

這個時候?關(guān)鍵的1步?來了：我們需要?給外層添加perspective和transform-style屬性 css3導(dǎo)航菜單?，為整個動畫增添3D變形效果：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .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); ??} }