CSS點擊翻書效果可以讓網頁上的圖片或者文字具有翻書的效果,讓用戶感受到非常真實的體驗。下面我們來看看如何實現CSS點擊翻書效果。
.book { position: relative; width: 200px; height: 250px; margin: 50px auto; perspective: 1000px; } .book .front, .book .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); backface-visibility: hidden; } .book .back { display: none; transform: rotateY(-180deg); } .book.flipped .front { transform: rotateY(180deg); z-index: -1; } .book.flipped .back { display: block; transform: rotateY(0); } .book .flip { position: absolute; bottom: 20px; left: 20px; padding: 10px 20px; background-color: #333; color: #fff; cursor: pointer; transition: all 0.3s; } .book .flip:hover { background-color: #666; }
以上代碼是CSS點擊翻書效果的CSS樣式,請將其保存到CSS文件中。
下面是HTML代碼:
前面的內容
背面的內容
翻轉
以上代碼是一個DIV元素,其中包含了前面內容(front)、背面內容(back)和一個翻轉按鈕(flip)。當用戶點擊翻轉按鈕時,前面內容被翻轉到背面。
通過設置CSS樣式,我們將虛擬的書本視為連接的兩張卡牌,前面和背面。點擊按鈕后,我們將前面翻轉到背面。
希望這篇文章對你了解CSS點擊翻書效果有所幫助!
上一篇css點擊背景