<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent{
width: 100px;
height: 100px;
border: 10px solid black;
padding: 100px;
margin: 30px auto;
}
.son{
position: relative;
width: 100px;
height: 100px;
transition: 1s;
transform-style: preserve-3d;
perspective:200px;
transform-origin: center center -50px;
}
.son div:nth-child(1){
position: absolute;
top: -100px;
width: 100px;
height: 100px;
background: yellow;
transform-origin: bottom;
transform: rotateX(90deg);
}
.son div:nth-child(2){
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: green;
transform-origin: right;
transform: rotateY(-90deg);
}
.son div:nth-child(3){
position: absolute;
top: 100px;
width: 100px;
height: 100px;
background: lemonchiffon;
transform-origin: top;
transform: rotateX(-90deg);
}
.son div:nth-child(4){
position: absolute;
left: 100px;
width: 100px;
height: 100px;
background: mediumblue;
transform-origin: left;
transform: rotateY(90deg);
}
.son div:nth-child(5){
position: absolute;
width: 100px;
height: 100px;
background: lightcoral;
transform: translateZ(-100px) rotateX(180deg);
}
.son div:nth-child(6){
position: absolute;
width: 100px;
height: 100px;
background: yellow;
}
.parent:hover .son{
transform: rotateX(360deg) rotateY(180deg) translate(100px,100px);
}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
网友评论