zoukankan      html  css  js  c++  java
  • 【基础】CSS 实例之翻转图片

    具体效果图如下:

    640?wx_fmt=gif

    主要用到的技术除了3D翻转和定位 ,还用到了一个新的属性 backface-visibility:visable|hidden;

    该属性主要是用来设定元素背面是否可见。

    具体的步骤如下:

    1、写出页面主体,

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

    2、通过定位使两张图片叠加在一起

    640?wx_fmt=gif

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

    640?wx_fmt=gif

    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>



  • 相关阅读:
    【项目一 · 直播】 ☞ 3. 推流直播
    【项目一 · 直播】 ☞ 2. 拉流直播
    【Objective-C 篇】 ☞ 10. 代理设计模式
    高精度模板
    csp每日习题
    pat乙级每日习题
    dp-LIS LCS 模型
    线性dp
    归并排序应用-求逆序对数量
    dp-位移模型(数字三角形演变)
  • 原文地址:https://www.cnblogs.com/hgmyz/p/12351786.html
Copyright © 2011-2022 走看看