翻转 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta  name="viewport" content="width=device-width,user-scalable=no" />
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                height: 200px;
                width: 150px;
                border: 1px solid #CCCCCC;
                position: relative;
                margin: 50px auto;
                perspective: 500px;
                -webkit-perspective: 500px;
            }
            .font{
                z-index: 5;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
            }
            .behind,.font{
                position: absolute;
                top: 0;
                left: 0;
                width: 150px;
                transition: all 2s ease;
                -webkit-transition: all 2s ease;
                
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
            }
            button{
                padding: 5px 15px;
            }
            
        </style>
    </head>
    <body>
        <div class="box">
            <img class="font" src="font.jpg" />
            <img class="behind" src="behind.png" />
        </div>
        
        <button>转</button>
        
        <script>
            window.onload=function(){
                var btn = document.querySelector('button');
                var font = document.querySelector('.font');
                var behind = document.querySelector('.behind');
                btn.onclick=function(){
                    font.style.webkitTransform = 'rotateY(180deg)';
                    behind.style.webkitTransform = 'rotateY(180deg)';
                }
            }
        </script>
    </body>
</html>

关键知识点：

backface-visibility: visible|hidden;

backface-visibility 属性定义当元素不面向屏幕时是否可见。

backface-visibility: hidden;
元素背对屏幕时，该元素不可见
backface-visibility: visible;
元素背对屏幕时，该元素可见






            

            
posted @ 
2016-12-23 11:28 
喜欢骑车的大冬瓜 
阅读(109) 
评论(0) 
编辑 
收藏 
举报