資訊專欄INFORMATION COLUMN
摘要：作為前端開發人員的必修課，翻轉能帶我們完成許多基本動效，本期我們將用實現翻轉效果第一步非常簡單，我們簡單畫個演示方塊，為其添加和屬性本示例均使用語法我們看一看這時候的效果這里需要注意的是屬性要寫在上而不是上，如果只在上寫，則鼠標移出時并沒有
作為前端開發人員的必修課，CSS3翻轉能帶我們完成許多基本動效，本期我們將用CSS3實現hover翻轉效果~
第一步非常簡單，我們簡單畫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，則鼠標移出時并沒有transition的過渡效果，如果我們只將transition寫在hover上：
第二步比較關鍵：我們不難發現始終在1個平面上翻轉，不夠有立體感，因此我們需要稍加改變思路——?用2層div嵌套css3背景動畫
?| 1 2 3 4 |
// html部分
<div class="block">
????<div class="block-in"> |
| 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);
??}
}
|
此時效果沒變，如下：
這個時候?關鍵的1步?來了：我們需要?給外層添加perspective和transform-style屬性 css3導航菜單?，為整個動畫增添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);
??}
}
|
最終實現效果如下：
最終我們?總結一下思路?：
1.建立內外2層div，鼠標 hover 到外層時，內層div添加翻轉css3 transform: rotateY(180deg)
2.注意將 transition 屬性添加到需要翻轉的div上，而不是 hover 時
3.外層div添加 perspective 和 transform-style 屬性，最終實現3D翻轉效果
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1064.html
摘要：所以給父元素添加至此，就實現了一個翻轉卡牌的效果，但是這里需要解決一個問題，因為屬性不被支持支持，所以需要進行降級，我的做法是直接顯示隱藏。 今天在工作中遇到需求，需要用CSS3寫一個卡片翻轉效果，這個效果看起來簡單，但是還是涉及到一些不常用的CSS3中的3D轉換的屬性以及實現該效果的思路，所以這里總結一下。 原文鏈接：http://mrzhang123.github.io/2016/...
摘要：所以給父元素添加至此，就實現了一個翻轉卡牌的效果，但是這里需要解決一個問題，因為屬性不被支持支持，所以需要進行降級，我的做法是直接顯示隱藏。 今天在工作中遇到需求，需要用CSS3寫一個卡片翻轉效果，這個效果看起來簡單，但是還是涉及到一些不常用的CSS3中的3D轉換的屬性以及實現該效果的思路，所以這里總結一下。 原文鏈接：http://mrzhang123.github.io/2016/...
摘要：之前張鑫旭博客寫的效果講解得不錯啊，既然是大神，應該能搜出點什么，結果一搜，還真有。參考感謝張鑫旭這篇文章好吧，變換，不過如此還有一篇寫得不錯的，幫助理解和屬性最后引用張鑫旭的一句話純粹從網上些效果代碼，那永遠就是的命咯 起因 昨晚在做慕課網的十天精通CSS3課程，其中的綜合練習是要做一個3D導航翻轉的效果。非常高大上。 以往這些效果我都很不屑，覺得網上一大堆這些特效的代碼，復制粘貼就...
摘要：分析代碼如下標簽里包裹一個盒子里包裹兩個，為效果的前后面做準備。分析外觀定位代碼如下效果首先創造環境，保留空間在的時候，我們讓旋轉，正面面對我們的元素向上翻轉，下面有元素翻轉上來，并且在翻轉時有一個凸出來的效果。 效果預覽 showImg(https://segmentfault.com/img/bVqF6k);分析：可以看出hover的時候是有前后兩個面的翻轉，并且有一個凸出效果。 ...
閱讀 2772·2021-11-02 14:42
閱讀 3163·2021-10-08 10:04
閱讀 1184·2019-08-30 15:55
閱讀 1025·2019-08-30 15:54
閱讀 2311·2019-08-30 15:43
閱讀 1680·2019-08-29 15:18
閱讀 863·2019-08-29 11:11
閱讀 2362·2019-08-26 13:52
