<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/public.css"/>
<style type="text/css">
/*
-webkit-perspective: 200px;-webkit-perspective-origin: right top; 景深
旋转移动
*/
.wrap{width: 100px;height: 100px;padding: 100px;border: 5px solid #000;margin: 100px auto;-webkit-perspective: 200px;-webkit-perspective-origin: right top;}
.box{width: 100px;height: 100px;position: relative;-webkit-transform-style: preserve-3d;-webkit-transition: 2s;-webkit-transform-origin: center center -50px;}
.box div{position: absolute;width: 100px;height: 100px;color: #FFF;font-size: 40px;line-height: 100px;text-align: center;}
.box div:nth-child(1){left: 0;top: -100px;background: blue;-webkit-transform:rotateX(90deg);-webkit-transform-origin: bottom;}
.box div:nth-child(2){left: -100px;top: 0;background: yellow;-webkit-transform:rotateY(-90deg);-webkit-transform-origin: right;}
.box div:nth-child(3){left: 0;top: 0;background: red;-webkit-transform: translateZ(0px);}
.box div:nth-child(4){left: 100px;top: 0;background: #f60;-webkit-transform:rotateY(90deg);-webkit-transform-origin: left;}
.box div:nth-child(5){left: 0px;top: 100px;background: gray;-webkit-transform:rotateX(-90deg);-webkit-transform-origin: top;}
.box div:nth-child(6){left: 0px;top: 0;background: green;-webkit-transform: translateZ(-100px) rotateX(180deg);}
.wrap:hover .box{-webkit-transform: rotateX(180deg);}
</style>
</head>
<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>
</html>