弄了一天了，不知道为什么实现不了这个图片3D转换效果，求助

css

解决方案 »

  1.   

    这里的代码是我想要实现的效果
    <html>
    <head>
        <style type="text/css">
            .kuang{
                height: 300px;
                width: 200px;
                border: 2px solid black;
                position: absolute;
                left: 600px;
                top: 200px;
            }
            .frontdiv{
                height: 300px;
                width: 200px;
                background-color: #00ffff;
                position: absolute;
                left: 0px;
                top: 0px;
                -webkit-transition:all 1s linear;
                -webkit-transform-style:preserve-3d;
                -webkit-backface-visibility:hidden;
            }
            .backdiv{
                height: 300px;
                width: 200px;
                background-color: #c0c0c0;
                position: absolute;
                left: 0px;
                top: 0px;
                -webkit-transition:all 1s linear;
                -webkit-transform-style:preserve-3d;
                -webkit-transform:rotateY(-180deg);
                -webkit-backface-visibility:hidden;
            }
        </style>
        <title></title>
    </head>
    <body>
    <div class="kuang" onclick="rotat()">
        <div class="frontdiv" id="frontdiv"> 
            Front
        </div>
        <div class="backdiv" id="backdiv">
            Back
        </div>
    </div>
    </body>
    <script type="text/javascript">
    var n=1;
    function rotat(){
        var frontdiv=document.getElementById('frontdiv');
        var backdiv=document.getElementById('backdiv');
        if(n==1){
            frontdiv.style.WebkitTransform="perspective(700) rotateY(-180deg)";
            backdiv.style.WebkitTransform="perspective(700) rotateY(-0deg)";
            n=0;
        }else{
            frontdiv.style.WebkitTransform="perspective(700) rotateY(0deg)";
            backdiv.style.WebkitTransform="perspective(700) rotateY(180deg)";
            n=1;
        }
    }
    </script>
    </html>
      

  2.   

    setTimeout延时执行下。chrome的dom更新可能做了什么处理导致没有效果<html>
    <head>
        <style type="text/css">
            .kuang{
                height: 300px;
                width: 200px;
                border: 2px solid black;
                position: absolute;
                left: 600px;
                top: 200px;
            }
            .frontdiv{
                height: 300px;
                width: 200px;
                background-color: #00ffff;
                position: absolute;
                left: 0px;
                top: 0px;
                -webkit-transition:all 1s linear;
                -webkit-transform-style:preserve-3d;
                -webkit-backface-visibility:hidden;
            }
        </style>
        <title></title>
    </head>
    <body>
    <div class="kuang" onclick="addd()" id="father">
        <div class="frontdiv" id="frontdiv"> 
        </div>
    </div>
    </body>
    <script type="text/javascript">
        var n = 1;
        function addd() {
            var fathd = document.getElementById('father');
            var childd = document.createElement('div');
            childd.className = "frontdiv";
            childd.style.backgroundColor = "#c0c0c0";
            childd.style.WebkitTransformStyle = "preserve-3d";
            childd.style.WebkitTransform = "rotateY(-180deg)";
            father.appendChild(childd);
            var frontdiv = document.getElementById('frontdiv');
            setTimeout(function () {
                frontdiv.style.WebkitTransform = "perspective(700) rotateY(-180deg)";
                childd.style.WebkitTransform = "perspective(700) rotateY(-0deg)";
            }, 0);
        }
    </script>
    </html>