CSS 實例之翻轉圖片_ZenDei技術網路在線

CSS 實例之翻轉圖片

-Advertisement-

具體效果圖如下：主要用到的技術除了3D翻轉和定位，還用到了一個新的屬性 backface-visibility：visable|hidden; 該屬性主要是用來設定元素背面是否可見。具體的步驟如下： 1、寫出頁面主體， 2、通過定位使兩張圖片疊加在一起 3、設置第一張圖片背面不可見 4、添加旋 ...

具體效果圖如下：

主要用到的技術除了3D翻轉和定位，還用到了一個新的屬性 backface-visibility：visable|hidden;

該屬性主要是用來設定元素背面是否可見。

具體的步驟如下：

1、寫出頁面主體，

 <div>
        <img src="Images/b.jpg" alt="">
        <img src="Images/c.jpg" alt="">
    </div>

2、通過定位使兩張圖片疊加在一起

  div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }

3、設置第一張圖片背面不可見

 div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }

4、添加旋轉180度

 div:hover img {
            transform: rotateY(180deg);
        }

最後給出完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* backface-visibility */
        
        div {
            width: 250px;
            height: 170px;
            margin: 100px auto;
            position: relative;
        }
        
        div img {
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
        
        div:hover img {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div>
        <img src="Images/b.jpg" alt="">
        <img src="Images/c.jpg" alt="">
    </div>
</body>

</html>

View Code

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

CSS 實例之滾動的圖片欄

在一些網站上可以經常看到有一些圖片進行持續不斷的滾動，這個效果可以通過css的動畫效果來實現。具體效果如下主要原理是通過動畫向左移動。首先給出兩組一樣的圖片（同一行上），讓整體圖片向左移動一組圖片的長度，這樣在動畫結束時會迅速還原到原來位置，而此時正好與第二組圖片交替，看起來就像是一組圖片在不 ...
移動端H5混合開發設置復盤與總結

此篇接上一篇：移動端H5混合開發，Touch觸控，拖拽，長按, 滑屏實現方案 https://www.cnblogs.com/buoge/p/9346699.html app 場布設置已經上線了，用戶可以通過手機端嵌入的h5網頁進行場布設置，原來只能在pc端瀏覽器，還得帶上個筆記本電腦很是不方便 ...
圖片上傳和修改樣式

我的圖片上傳使用form表單，html： css js 後臺把數據傳給資料庫，成功後跳轉頁面，在html頁面中用這個<img src="${sessionScope.imgurl}"/> ...
vue 音樂App QQ音樂搜索列表最新介面跨域設置

在 webpack.dev.config.js中在請求金封裝的介面中 ...
Java使用

Java中線程調用出了線程池外可以使用多個繼承於queue的類獲得多Java線程。由於Java中所有都是對象的設定可以使用類來存儲各種數據（類似c++中的struct) 在servlet編程中，繼承自HTTPservlet類時新手推薦只重載doGet（）以及doPost（）函數上個例子其中創建 ...
簡述深淺拷貝原理

//for in 不可以獲取不可枚舉的屬性 //hasOwnProperty 會忽略原型鏈上的屬性 //Object.getOwnPropertyNames 可以獲取可枚舉和不可枚舉的屬性 //深拷貝 ...
面向對象實現多圖輪播效果

1.靜態頁面的搭建 1 <body> 2 <div class="wrap" id="wrap"> 3 <div id="wrap_bg"> 4 <ul> 5 <li><img src="image/img_bg/img_bg_5.jpg"></img></li> 6 <li><img src="i ...
淺談CSS高度坍塌

高度坍塌情況：當父元素沒有設置高度，且子元素塊都向左（右）浮動起來，那麼父元素就會出現坍塌的現象。解決辦法：在父元素包含塊中加一個div：優點：相容性強，適合初學者。缺點：不利於優化。方法二：overflow＋room 優點：相容性強。缺點：對margin屬性有影響，不能設負值，設負值 ...