下面，說明以下實(shí)現(xiàn)思路與代碼。

實(shí)現(xiàn)思路(這里只介紹關(guān)鍵代碼與思路)

在網(wǎng)頁中，多數(shù)元素是以2D形式存在的，這意" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > html + css + js 制作卡片旋轉(zhuǎn)效果

html + css + js 制作卡片旋轉(zhuǎn)效果

時間：2023-09-27 16:12:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-27 16:12:01 來源：網(wǎng)站運(yùn)營

html + css + js 制作卡片旋轉(zhuǎn)效果：

卡片旋轉(zhuǎn)效果

在網(wǎng)頁設(shè)計中，類似以下的卡片旋轉(zhuǎn)效果是十分常用的：







下面，說明以下實(shí)現(xiàn)思路與代碼。

實(shí)現(xiàn)思路

(這里只介紹關(guān)鍵代碼與思路)

在網(wǎng)頁中，多數(shù)元素是以2D形式存在的，這意味著它們沒有正反面之分，就無法實(shí)現(xiàn)旋轉(zhuǎn)的效果。

所以，首先要使卡片元素具有3D屬性。在css中設(shè)置如下屬性來實(shí)現(xiàn)：

.card { transfrom-style: preserve-3d;}這樣就可以設(shè)置卡片的正面與反面，也就是說一個卡片的HTML結(jié)構(gòu)應(yīng)如下：

<body> <div class="card"> <div class="front"></div> <div class="back"></div> </div></body>這樣寫之后，網(wǎng)頁變成這樣：




可以看到，卡片并沒有像我們想的那樣，一個在前，一個在后，而是仍上下排列。這是由于定位的問題造成的。

添加絕對定位后可以解決：

.front,.back { position: absolute;}然后發(fā)現(xiàn)，網(wǎng)頁變成了這樣：




背面的元素居然顯示在前面！

這又是什么原因呢？

這是因?yàn)槲覀儾]有指定哪個是正面，哪個是反面，由于CSS的層疊特性，后寫的背面自然而然地顯示出來

那么，要怎么設(shè)置呢？

只要將要顯示在背面的繞著Y軸旋轉(zhuǎn)180度，就可以讓其轉(zhuǎn)到背面去了

.back { translate: rotateY(180deg);}網(wǎng)頁變成了這樣：




觀察單詞hello的奇形怪狀，我們發(fā)現(xiàn)其確實(shí)轉(zhuǎn)到了背面，為什么顯示的還是背面呢？

因?yàn)?，css的這個3D屬性并不會有遮擋效果，所以理論上，我們是既可以看到正面，又可以看到背面的，由于先后順序，我們相當(dāng)于是透過了正面看到背面

解決辦法也很簡單，只要將背面設(shè)置為不可見即可

.front,.back { position: absolute; backface-visibility: hidden;}卡片成功正確顯示：




這時候，有人就會問了：你不是說設(shè)置背面不可見嗎？怎么正面也設(shè)置了呢？

當(dāng)然啦，不設(shè)置也是完全OK的，我這里只是為了偷懶，不用再開一個選擇器：

.back { backface-visibility: hidden;}到這里，卡片的編寫已經(jīng)完成，接下來要考慮如何讓它有旋轉(zhuǎn)的效果。

這時候有人又會說了，旋轉(zhuǎn)前面不是講過嗎，簡單！

那就錯了，前面的旋轉(zhuǎn)代碼會讓圖片一步到位直接顯示，并沒有動畫效果，那怎么辦呢？

css給我們提供了過渡的動畫顯示，會幫我們補(bǔ)充中間的過程動畫，只需給卡片設(shè)置如下屬性即可：

.card { transfrom-style: preserve-3d; /* 后面的秒數(shù)代表從初始到終止的歷時 */ transition: 1s;}現(xiàn)在萬事具備，只欠東風(fēng)

那么如何編寫js代碼，實(shí)現(xiàn)點(diǎn)擊旋轉(zhuǎn)的效果呢？

通過前面的介紹，其實(shí)這一步非常簡單：哪一面被點(diǎn)擊了就讓它旋轉(zhuǎn)180度即可。

<script> window.onload = function(){ var card = document.getElementsByClassName('card')[0]; card.onclick = function(){ this.classList.toggle('flipped'); } }</script>.flipped { translate: rotateY(180deg);}

代碼

1.HTML

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="card.css"> <title>卡片旋轉(zhuǎn)效果</title> <script> window.onload = function(){ var card = document.getElementsByClassName('card')[0]; card.onclick = function(){ this.classList.toggle('flipped'); } } </script></head><body> <div class="card"> <div class="front"></div> <div class="back">hello</div> </div></body></html>2.css

* { margin: 0; padding: 0;}.card { height: 270px; width: 270px; margin: 40px auto; /* 使該盒子具有3D屬性 */ transform-style: preserve-3d; /*動畫效果歷時1秒 */ transition: 1s; /* 使具有旋轉(zhuǎn)效果 */ perspective: 1000px;}.front { width: 100%; height: 100%; background-image: url('./img/youli.jpg');}.back { width: 100%; height: 100%; background-color: aqua; color: white; font-size: 26px; text-align: center; line-height: 270px; /* 讓在背面顯示的內(nèi)容轉(zhuǎn)到背面 */ transform: rotateY(180deg);}.front,.back { /* 讓卡片背面與正面重合 */ position: absolute; /* 隱藏卡片背面 */ backface-visibility: hidden;}/* 點(diǎn)擊時切換的樣式 */.flipped { transform: rotateY(180deg);}
完整的源碼如下：

鏈接：https://pan.baidu.com/s/1r1vO3HDYYMT5FjRJCudtOg

提取碼：yard

作者初學(xué)，如有紕漏，懇請批評指正。

關(guān)鍵詞：卡片,旋轉(zhuǎn),效果

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉