資訊專欄INFORMATION COLUMN
摘要：作為前端開發(fā)人員的必修課，翻轉(zhuǎn)能帶我們完成許多基本動(dòng)效，本期我們將用實(shí)現(xiàn)翻轉(zhuǎn)效果第一步非常簡(jiǎn)單，我們簡(jiǎn)單畫個(gè)演示方塊，為其添加和屬性本示例均使用語(yǔ)法我們看一看這時(shí)候的效果這里需要注意的是屬性要寫在上而不是上，如果只在上寫，則鼠標(biāo)移出時(shí)并沒(méi)有
作為前端開發(fā)人員的必修課，CSS3翻轉(zhuǎn)能帶我們完成許多基本動(dòng)效，本期我們將用CSS3實(shí)現(xiàn)hover翻轉(zhuǎn)效果~
第一步非常簡(jiǎn)單，我們簡(jiǎn)單畫1個(gè)演示方塊，為其?添加transition和transform屬性?：
?| 1 2 3 4 5 6 7 8 9 10 11 |
// 本示例均使用Sass語(yǔ)法
.block {
??width: 200px;
??height: 200px;
??background: brown;
??cursor: pointer;
??transition: 0.8s;
??&:hover {
????transform: rotateY(180deg);
??}
}
|
我們看一看這時(shí)候的效果：
這里?需要注意?的是：?transition屬性要寫在.block上而不是hover上?，如果只在hover上寫transition，則鼠標(biāo)移出時(shí)并沒(méi)有transition的過(guò)渡效果，如果我們只將transition寫在hover上：
第二步比較關(guān)鍵：我們不難發(fā)現(xiàn)始終在1個(gè)平面上翻轉(zhuǎn)，不夠有立體感，因此我們需要稍加改變思路——?用2層div嵌套css3背景動(dòng)畫
?| 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);
??}
}
|
此時(shí)效果沒(méi)變，如下：
這個(gè)時(shí)候?關(guān)鍵的1步?來(lái)了：我們需要?給外層添加perspective和transform-style屬性 css3導(dǎo)航菜單?，為整個(gè)動(dòng)畫增添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);
??}
}
|
最終實(shí)現(xiàn)效果如下：
最終我們?總結(jié)一下思路?：
1.建立內(nèi)外2層div，鼠標(biāo) hover 到外層時(shí)，內(nèi)層div添加翻轉(zhuǎn)css3 transform: rotateY(180deg)
2.注意將 transition 屬性添加到需要翻轉(zhuǎn)的div上，而不是 hover 時(shí)
3.外層div添加 perspective 和 transform-style 屬性，最終實(shí)現(xiàn)3D翻轉(zhuǎn)效果
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1064.html
摘要：所以給父元素添加至此，就實(shí)現(xiàn)了一個(gè)翻轉(zhuǎn)卡牌的效果，但是這里需要解決一個(gè)問(wèn)題，因?yàn)閷傩圆槐恢С种С郑孕枰M(jìn)行降級(jí)，我的做法是直接顯示隱藏。 今天在工作中遇到需求，需要用CSS3寫一個(gè)卡片翻轉(zhuǎn)效果，這個(gè)效果看起來(lái)簡(jiǎn)單，但是還是涉及到一些不常用的CSS3中的3D轉(zhuǎn)換的屬性以及實(shí)現(xiàn)該效果的思路，所以這里總結(jié)一下。 原文鏈接：http://mrzhang123.github.io/2016/...
摘要：所以給父元素添加至此，就實(shí)現(xiàn)了一個(gè)翻轉(zhuǎn)卡牌的效果，但是這里需要解決一個(gè)問(wèn)題，因?yàn)閷傩圆槐恢С种С?，所以需要進(jìn)行降級(jí)，我的做法是直接顯示隱藏。 今天在工作中遇到需求，需要用CSS3寫一個(gè)卡片翻轉(zhuǎn)效果，這個(gè)效果看起來(lái)簡(jiǎn)單，但是還是涉及到一些不常用的CSS3中的3D轉(zhuǎn)換的屬性以及實(shí)現(xiàn)該效果的思路，所以這里總結(jié)一下。 原文鏈接：http://mrzhang123.github.io/2016/...
摘要：之前張?chǎng)涡癫┛蛯懙男Чv解得不錯(cuò)啊，既然是大神，應(yīng)該能搜出點(diǎn)什么，結(jié)果一搜，還真有。參考感謝張?chǎng)涡襁@篇文章好吧，變換，不過(guò)如此還有一篇寫得不錯(cuò)的，幫助理解和屬性最后引用張?chǎng)涡竦囊痪湓捈兇鈴木W(wǎng)上些效果代碼，那永遠(yuǎn)就是的命咯 起因 昨晚在做慕課網(wǎng)的十天精通CSS3課程，其中的綜合練習(xí)是要做一個(gè)3D導(dǎo)航翻轉(zhuǎn)的效果。非常高大上。 以往這些效果我都很不屑，覺(jué)得網(wǎng)上一大堆這些特效的代碼，復(fù)制粘貼就...
摘要：分析代碼如下標(biāo)簽里包裹一個(gè)盒子里包裹兩個(gè)，為效果的前后面做準(zhǔn)備。分析外觀定位代碼如下效果首先創(chuàng)造環(huán)境，保留空間在的時(shí)候，我們讓旋轉(zhuǎn)，正面面對(duì)我們的元素向上翻轉(zhuǎn)，下面有元素翻轉(zhuǎn)上來(lái)，并且在翻轉(zhuǎn)時(shí)有一個(gè)凸出來(lái)的效果。 效果預(yù)覽 showImg(https://segmentfault.com/img/bVqF6k);分析：可以看出hover的時(shí)候是有前后兩個(gè)面的翻轉(zhuǎn)，并且有一個(gè)凸出效果。 ...
摘要：使用繪制的可交互扇形現(xiàn)有動(dòng)畫實(shí)現(xiàn)方式的不足和都不十分精確。為它們傳入的第二個(gè)參數(shù)，實(shí)際上只是指定了把動(dòng)畫代碼添加到瀏覽器線程隊(duì)列中以等待執(zhí)行的時(shí)間。就是為了繪制而生，再合適不過(guò)了。感興趣的看官點(diǎn)擊這里本文轉(zhuǎn)載自筆者的個(gè)人博客 使用H5 canvas繪制的可交互扇形 requestAnimationFrame() 現(xiàn)有動(dòng)畫實(shí)現(xiàn)方式的不足 setTimeout和setInterval都不十...
閱讀 2854·2021-11-02 14:42
閱讀 3224·2021-10-08 10:04
閱讀 1249·2019-08-30 15:55
閱讀 1086·2019-08-30 15:54
閱讀 2379·2019-08-30 15:43
閱讀 1738·2019-08-29 15:18
閱讀 926·2019-08-29 11:11
閱讀 2429·2019-08-26 13:52
