CSS33D变换之综合运用

点击'roll'按钮，会出现旋转的动画

代码如下

                            div#camera{            width: 500px;            height: 500px;            outline: 1px solid black;            margin:100px auto;            position: relative;            perspective: 1000px;        }        div#camera>div{            width: 400px;            height: 400px;            position: absolute;            top:calc(50% - 200px);            left:calc(50% - 200px);            outline: 1px solid black;            transition: all 1s linear;            background-color: #fff;            }        div#camera>div:nth-child(1){            transform: rotateY(0deg) translateZ(200px);            z-index: 99;        }        div#camera>div:nth-child(2){            transform: rotateY(90deg) translateZ(200px);        }                div#camera>div:nth-child(3){            transform: rotateY(180deg) translateZ(200px);        }        div#camera>div:nth-child(4){            transform: rotateY(270deg) translateZ(200px);        }        div#camera>div>img{            width: 100%;        }        button{            margin: 10px auto;            display: block;        }           
        


      
查看更多关于CSS33D变换之综合运用的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112466