3D变换
<style>
.box{width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 30px auto; -webkit-transform-style: preserve-3d; -webkit-perspective: 100px;}
.div{width: 100px; height: 100px; background: Red; transition: 1s;}
.box:hover .div{-webkit-transform: rotateX(180deg);}
.box:hover .div{-webkit-transform:rotateY(180deg);}
.box:hover .div{-webkit-transform:rotateZ(180deg);}
.box:hover .div{-webkit-transform:translateZ(100px);}
</style>
<body>
<div class="box">
<div class="div">111
</div>
</div>
</body>
转载请注明原文地址: https://www.6miu.com/read-32388.html
