旋转的魔方-3D

最新推荐文章于 2025-08-09 14:20:21 发布

原创最新推荐文章于 2025-08-09 14:20:21 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #transform3D #transition

css3 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body{
height: 100%;
}
body{
perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.father{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
/*background-color: red;*/

-webkit-transition: all 5s;
-o-transition: all 5s;
transition: all 5s;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

/*-webkit-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
transform: rotateX(45deg);*/

}
.fat{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
/*background-color: red;*/

-webkit-transition: all 5s;
-o-transition: all 5s;
transition: all 5s;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

-webkit-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
transform: rotateX(45deg);
}
div>img{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-radius: 20px;
opacity: 0.9;
}
.son1{
-webkit-transform: rotateZ(45deg) translateZ(-100px);
-ms-transform: rotateZ(45deg) translateZ(-100px);
-o-transform: rotateZ(45deg) translateZ(-100px);
transform: rotateZ(45deg) translateZ(-100px);
}
.son2{
-webkit-transform: rotateZ(45deg) translateY(100px) rotateX(90deg);
-ms-transform: rotateZ(45deg) translateY(100px) rotateX(90deg);
-o-transform: rotateZ(45deg) translateY(100px) rotateX(90deg);
transform: rotateZ(45deg) translateY(100px) rotateX(90deg);
}
.son3{
-webkit-transform: rotateZ(135deg) translateY(100px) rotateX(90deg);
-ms-transform: rotateZ(135deg) translateY(100px) rotateX(90deg);
-o-transform: rotateZ(135deg) translateY(100px) rotateX(90deg);
transform: rotateZ(135deg) translateY(100px) rotateX(90deg);
}
.son4{
-webkit-transform: rotateZ(-45deg) translateY(100px) rotateX(90deg);
-ms-transform: rotateZ(-45deg) translateY(100px) rotateX(90deg);
-o-transform: rotateZ(-45deg) translateY(100px) rotateX(90deg);
transform: rotateZ(-45deg) translateY(100px) rotateX(90deg);
}
.son5{
-webkit-transform: rotateZ(-135deg) translateY(100px) rotateX(90deg);
-ms-transform: rotateZ(-135deg) translateY(100px) rotateX(90deg);
-o-transform: rotateZ(-135deg) translateY(100px) rotateX(90deg);
transform: rotateZ(-135deg) translateY(100px) rotateX(90deg);
}
.son6{
-webkit-transform: rotateZ(45deg) translateZ(100px);
-ms-transform: rotateZ(45deg) translateZ(100px);
-o-transform: rotateZ(45deg) translateZ(100px);
transform: rotateZ(45deg) translateZ(100px);
}
.father:hover{
-webkit-transform: rotateY(720deg);
-ms-transform: rotateY(720deg);
-o-transform: rotateY(720deg);
transform: rotateY(720deg);
}
</style>
</head>
<body>
<div class="father">
<div class="fat">
<div class="son1">
<img src="1.jpg" alt="">
</div>
<div class="son2">
<img src="2.jpg" alt="">
</div>
<div class="son3">
<img src="3.jpg" alt="">
</div>
<div class="son4">
<img src="4.jpg" alt="">
</div>
<div class="son5">
<img src="5.jpg" alt="">
</div>
<div class="son6">
<img src="6.jpg" alt="">
</div>
</div>
</div>
</body>
</html>