css3 一个六边形和放大旋转动画DEMO演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="gb2312">
        <title>放大旋转动画DEMO演示</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            body{
            /* background: url(../images/bodyBg.jpg) repeat;     */
            }
            .nav{
                width: 90%;
                margin: 0 auto;
                margin-top: 100px;    
                height: 255px;
                overflow: hidden;
            }
            .nav ul{
                
            }
            .nav ul li{
                position: relative;
                float: left;
                width: 210px;
                margin-top: 70px;
                height: 120px;
                text-align: center;
                list-style: none;
                margin-left: 20px;
                background: rgba(0, 0 ,0 ,0.5);
            }
            .nav ul li:before{
                content: "";
                width: 210px;
                height: 120px;
                background: rgba(0,0,0,0.5);
                position: absolute;
                top: 0;
                left: 0;
                transform: rotate(60deg);
                -webkit-transform: rotate(60deg);
                z-index:-1;
            }
            .nav ul li:after{
                
                content: "";
                width: 210px;
                height: 120px;
                background: rgba(0,0,0,0.5);
                position: absolute;
                top: 0;
                left: 0;
                transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
                z-index:-1;
            }
            .nav ul li img{
                transition: 1s;
                -webkit-transition: 1s;
                display: block;
                margin: 21px auto;    
                z-index:2;
            }        
            .nav ul li img:hover{
                transform:rotate(360deg) acale(1.5);
                -webkit-transform:rotate(360deg) scale(1.5); 
                -moz-transform:rotate(360deg) acale(1.5);
                -ms-transform:rotate(360deg) acale(1.5);
            }
            
        </style> 
    </head>
    <body>
        <div class="nav">
            <ul>
            <li><img src="images/1.png"/></li>
            <!-- <li><img src="images/2.png"/></li>    
            <li><img src="images/3.png"/></li>    
            <li><img src="images/4.png"/></li>
            <li><img src="images/5.png"/></li> -->                    
            </ul>
        </div>
        
    </body>
</html>
鼠标移到中间图片会有放大旋转效果
css3 一个六边形 和 放大旋转动画DEMO演示

猜你喜欢

css3 一个六边形和放大旋转动画DEMO演示
