• CSS3翻转特效;


    CSS代码:

    *{padding: 0;margin: 0;}
    .container{ 90%;padding: 5%;height: 12rem;display: flex;justify-content:space-around; }
    .container  > div{ 160px;height: 160px;}
    img{ 100%;height: 100%;display: block;overflow: hidden;}
    a{transition:all 1s ease;display: block;height: 100%;}
    span{color: #fff; text-align: center;line-height: 160px;}
    /*div1*/
    .div1 span{display:none;height:100%;background-color:blue;transform:rotateX(-180deg);}
    .a1:hover img{display: none;}
    .a1:hover span{display: block;}
    .a1:hover{transform:rotateX(180deg) scale(.9,.9 );}
    
    /*div2*/
    .div2 span{display:none;height:100%;background-color:blue;transform:rotateY(-180deg);}
    .a2:hover img{display: none;}
    .a2:hover span{display: block;}
    .a2:hover{transform:rotateY(180deg) scale(.9,.9 );}
    
    /*div3*/
    .div3{perspective:1000px;}
    .div3 a{transform-style:preserve-3d;transition:all .5s ease;}
    .div3 span{display:block;height: 160px;background-color:blue;transform-origin:50% 0;transform:rotateX(-90deg); }
    .a3:hover{transform:rotateX(90deg) translate3d(0,-80px,80px);}
    
    /*div4*/
    .div4{perspective:1000px;}
    .div4 a{transform-style:preserve-3d;transition:all .5s ease;}
    .div4 span{display:block;height: 160px;background-color:blue;transform-origin:50% 100%;transform:translateY(-320px) rotateX(90deg);}
    .a4:hover{transform:rotateX(-90deg) translate3d(0,80px,80px);}
    
    /*div5*/
    .div5{perspective:1000px;}
    .div5 a{transform-style:preserve-3d;transition:all .5s ease;}
    .div5 span{display:block;height: 160px;background-color:blue;transform-origin:0 50%;transform:translate(100%,-100%) rotateY(90deg); }
    .a5:hover{transform:rotateY(-90deg) translate3d(-80px,0,80px);}
    
    
    /*div5*/
    .div6{perspective:1000px;}
    .div6 a{transform-style:preserve-3d;transition:all .5s ease;}
    .div6 span{display:block;height: 160px;background-color:blue;transform-origin:100% 50%;transform:translate(-100%,-100%) rotateY(-90deg); }
    .a6:hover{transform:rotateY(90deg) translate3d(80px,0,80px);}
    

    HTML:

    <section class="container">
    	<div class="div1">
    		<a href="###" class="a1">
    			<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
    			<span>轴向二维翻转</span>
    		</a>
    	</div>
    	<div class="div2">
    		<a href="###" class="a2">
    			<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
    			<span>横向向二维翻转</span>
    		</a>
    	</div>
    	<div class="div3">
    		<a href="###" class="a3">
    			<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
    			<span>3D上翻转</span>
    		</a>
    	</div>
         </section>
        <section class='container'>
    
    	<div class="div4">
    		<a href="###" class="a4">
    			<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
    			<span>3D下翻转</span>
    		</a>
    	</div>
    	<div class="div5">
    		<a href="###" class="a5">
    			<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
    			<span>3D右翻转</span>
    		</a>
    	</div>
    	<div class="div6">
    		<a href="###" class="a6">
    			<img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png">
    			<span>3D左翻转</span>
    		</a>
    	</div>
    </section>
    

    DEMO地址:http://codepen.io/jonechen/pen/JXwzKQ

  • 相关阅读:
    cisco telnet(转载)
    华为bfd配置步骤
    cisco ssh实验--附带配置脚本-2019.11.19
    远程设备管理opendx平台搭建-server,agent以及front实际搭建
    远程设备管理opendx平台搭建-appium和adb的安装
    华为交换机sflow配置
    华为交换机netstream配置
    centos6虚拟机复制后修改网卡
    docker基本操作
    esxi 6 添加硬盘、网卡
  • 原文地址:https://www.cnblogs.com/jone-chen/p/5465482.html
Copyright © 2020-2023  润新知