<style>
.wrap{width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 100px auto; -webkit-perspective: 200px; -webkit-transform: scale(2); -webkit-perspective-origin: center center;}
.box{width: 100px; height: 100px; background: red; position: relative; -webkit-transform-style: preserve-3d; transition: 2s; -webkit-transform-origin: center center -50px;}
.box div{width: 100px; height: 100px; position: absolute; color: #fff; font-size: 50px; text-align: center; line-height: 100px;}
.box div:nth-of-type(1){left: 0; top: -100px; background: #9C0; -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg);}
.box div:nth-of-type(2){left: -100px; top: 0px; background: #CF3; -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg);}
.box div:nth-of-type(3){left: 0px; top:0px; background: #CCF;}
.box div:nth-of-type(4){left: 100px; top: 0; background: #0C9; -webkit-transform-origin: left; -webkit-transform: rotateY(90deg);}
.box div:nth-of-type(5){left: 0px; top: 100px; background: #69C; -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg);}
.box div:nth-of-type(6){left: 0; top: 0; background: #F0C;-webkit-transform: translateZ(-100px) rotateX(180deg);}
.wrap:hover .box{ -webkit-transform:rotateX(180deg);}
</style>
<body>
<div class="wrap">
<div class="box">
<div>1
</div>
<div>2
</div>
<div>3
</div>
<div>4
</div>
<div>5
</div>
<div>6
</div>
</div>
</div>
</body>
效果图
转载请注明原文地址: https://www.6miu.com/read-34659.html
