zoukankan      html  css  js  c++  java
  • css3 动画旋转导航

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                       
               /*-webkit-perspective:100;*/
               display: flex;
             
            }
            li{
                position: relative;
                width: 100px;
                height: 100px;
                -webkit-transform-style: preserve-3d; /* */
                -webkit-transition: 2s;
                list-style: none;
                margin-right: 10px;
            }
    
            li:hover{
                -webkit-transform: rotateX(180deg);/***旋转***/
            }
            li .face{
                position: absolute;
                left: 0px;
                top: 0px;
                -webkit-backface-visibility: hidden;/***隐藏被旋转的div的背面*/
            }
            li .face img{
                width: 100%;
            }
    
            .back{
                width: 100px;
                height: 100px;
                -webkit-transform: rotateX(180deg);
               /* background: -webkit-linear-gradient(top,rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); */                       
            }
        </style>
    </head>
    <body>
    <ul class="box">
        <li class="film">
            <div class="face front">
                <img src="images/Penguins.jpg">              
            </div>
            <div class="face back">                        
                 <img src="images/Koala.jpg" alt="so suess">        
            </div>
        </li>
    
        <li class="film">
            <div class="face front">
                <img src="images/Koala.jpg" alt="so suess">
            </div>
            <div class="face back">                        
                <img src="images/Penguins.jpg">               
            </div>
        </li>
        <li class="film">
            <div class="face front">
                <img src="images/Penguins.jpg">   
              
            </div>
            <div class="face back">                        
                <img src="images/Koala.jpg" alt="so suess">        
            </div>
        </li>
    </ul>
    
    </body>
    </html>
  • 相关阅读:
    FCC学习笔记(二)
    FCC学习笔记(一)
    jQuery(三)
    jQuery(二)
    jQuery(一)
    JavaScript(九)
    JavaScript(八)
    2-1回归算法
    14-章小结
    13-模型训练及测试
  • 原文地址:https://www.cnblogs.com/jinsuo/p/6946048.html
Copyright © 2011-2022 走看看