html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D旋转魔方</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 备注：直接输入这个命令： section>p*6>img[src="images/$.jpg"]
导入准备好的图片-->
<section>
<p><img src="images/1.jpg" alt=""></p>
<p><img src="images/2.jpg" alt=""></p>
<p><img src="images/3.jpg" alt=""></p>
<p><img src="images/4.jpg" alt=""></p>
<p><img src="images/5.jpg" alt=""></p>
<p><img src="images/6.jpg" alt=""></p>
<p><img src="images/1.jpg" alt=""></p>
<p><img src="images/2.jpg" alt=""></p>
<p><img src="images/3.jpg" alt=""></p>
<p><img src="images/4.jpg" alt=""></p>
<p><img src="images/5.jpg" alt=""></p>
<p><img src="images/6.jpg" alt=""></p>
</section>
</body>
</html>
css部分：
* {
padding: 0;
margin : 0;
}
body {
display : flex;
justify-content : center;
align-items : center;
height : 100vh;
background-color: black;
perspective : 1000px;
}
section {
position : relative;
width : 150px;
height : 150px;
transform-style: preserve-3d;
animation : rotate 5s linear infinite;
}
section p {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-color: #fff;
transition : all 1s;
}
section p img {
width : 100%;
height: 100%;
}
section p:nth-child(1) {
transform: translateZ(75px);
}
section:hover p:nth-child(1) {
transform: translateZ(200px);
}
section p:nth-child(2) {
transform: rotateX(-180deg) translateZ(75px);
}
section:hover p:nth-child(2) {
transform: rotateX(-180deg) translateZ(200px);
}
section p:nth-child(3) {
transform: rotateX(90deg) translateZ(75px);
}
section:hover p:nth-child(3) {
transform: rotateX(90deg) translateZ(200px);
}
section p:nth-child(4) {
transform: rotateX(-90deg) translateZ(75px);
}
section:hover p:nth-child(4) {
transform: rotateX(-90deg) translateZ(200px);
}
section p:nth-child(5) {
transform: rotateY(90deg) translateZ(75px);
}
section:hover p:nth-child(5) {
transform: rotateY(90deg) translateZ(200px);
}
section p:nth-child(6) {
transform: rotateY(-90deg) translateZ(75px);
}
section:hover p:nth-child(6) {
transform: rotateY(-90deg) translateZ(200px);
}
section p:nth-child(7) {
transform: translateZ(75px);
}
section p:nth-child(8) {
transform: rotateX(-180deg) translateZ(75px);
}
section p:nth-child(9) {
transform: rotateX(90deg) translateZ(75px);
}
section p:nth-child(10) {
transform: rotateX(-90deg) translateZ(75px);
}
section p:nth-child(11) {
transform: rotateY(90deg) translateZ(75px);
}
section p:nth-child(12) {
transform: rotateY(-90deg) translateZ(75px);
}
@keyframes rotate {
0% {
transform: rotateY(0) rotateX(0);
}
100% {
transform: rotateY(360deg) rotateX(360deg);
}
}
「艾尔登法环」梅琳娜手办开订 立体手办▪
万代「艾尔登法环」白狼战鬼手办开订 立体手办▪
「夏目友人帐」猫咪老师粘土人开订 立体手办▪
「五等分的新娘∬」中野三玖·白无垢版手办开订 立体手办▪
「海贼王」乌索普Q版手办开订 立体手办▪
良笑社「初音未来」新手办开订 立体手办▪
「黑岩射手DAWN FALL」死亡主宰手办开订 立体手办▪
「盾之勇者成名录」菲洛手办登场 立体手办▪
「魔法少女小圆」美树沙耶香手办开订 立体手办▪
「咒术回战」七海建人粘土人登场 立体手办▪
「五等分的新娘」中野二乃白无垢手办开订 立体手办▪
「为美好的世界献上祝福！」芸芸粘土人开订 立体手办▪
「公主连结 与你重逢」六星可可萝手办开订 立体手办▪
「女神异闻录5」Joker雨宫莲手办开订 立体手办▪
「间谍过家家」约尔・福杰粘土人登场 立体手办▪
「街角魔族 2丁目」吉田优子手办开订 立体手办▪
「火影忍者 疾风传」旗木卡卡西·暗部版粘土人登场 立体手办▪
「佐佐木与宫野」宫野由美粘土人开订 立体手办▪
「盾之勇者成名录」第2季拉芙塔莉雅手办开订 立体手办▪
「咒术回战」两面宿傩Q版坐姿手办开订 立体手办▪
「DATE·A·BULLET」时崎狂三手办开订 立体手办▪
「狂赌之渊××」早乙女芽亚里粘土人开订 立体手办▪
「魔道祖师」魏无羨粘土人开订 立体手办▪
「新·奥特曼」奥特曼手办现已开订 立体手办▪
扫码关注我们