| |
<!DOCTYPE html> |
| |
<html> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<title></title> |
| |
<style type="text/css"> |
| |
#wrap{width: 250px;height: 250px;position: relative;margin: 30px auto; |
| |
transition: all 10s ease-in-out; |
| |
transform-style: preserve-3d; |
| |
} |
| |
#wrap div{width: 250px;height: 250px;background: red;position: absolute; |
| |
} |
| |
#wrap:hover{transform: rotateX(3000deg) rotateY(2000deg);} |
| |
|
| |
/*右边*/ |
| |
#wrap div:nth-child(1){ |
| |
background: red; |
| |
transform: rotateY(90deg) translateZ(125px); |
| |
} |
| |
/*左边*/ |
| |
#wrap div:nth-child(2){ |
| |
background: yellow; |
| |
transform: rotateY(270deg) translateZ(125px); |
| |
} |
| |
|
| |
/*下面*/ |
| |
#wrap div:nth-child(3){ |
| |
background: green; |
| |
transform: rotateX(270deg) translateZ(125px); |
| |
} |
| |
|
| |
/*上面*/ |
| |
#wrap div:nth-child(4){ |
| |
background: orchid; |
| |
transform: rotateX(90deg) translateZ(125px); |
| |
} |
| |
|
| |
/*前面*/ |
| |
#wrap div:nth-child(5){ |
| |
background: pink; |
| |
transform: translateZ(125px); |
| |
} |
| |
|
| |
/*后面*/ |
| |
#wrap div:nth-child(6){ |
| |
background: lightcyan; |
| |
transform: rotateX(180deg) translateZ(125px); |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="wrap"> |
| |
<div>1</div> |
| |
<div>2</div> |
| |
<div>3</div> |
| |
<div>4</div> |
| |
<div>5</div> |
| |
<div>6</div> |
| |
</div> |
| |
</body> |
| |
</html> |