CSS_3D正方体动画

最新推荐文章于 2025-06-08 20:34:32 发布

sinat_25606843

最新推荐文章于 2025-06-08 20:34:32 发布

阅读量593

点赞数

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:100px; height:100px; padding: 100px;border: 1px solid red; border-radius:10px;margin:100px;

perspective: 300px;
}
#val{width:100px; height: 100px;
transition: 2s;
transform-origin:center center -50px;
transform-style:preserve-3d;
}
#val div{position:absolute;width:100px;height:100px;background:red;text-align:center;font:40px/100px simhei;}

#val div:nth-of-type(1){top:-100px;background:#0000FF;
transform-origin:bottom;
transform: rotateX(90deg);
}
#val div:nth-of-type(2){left:-100px;background:#ff00FF;
transform-origin:right;
transform:rotateY(-90deg);
}
#val div:nth-of-type(3){background:#00ffFF;}
#val div:nth-of-type(4){left:100px;background:#0ff0FF;
transform-origin:left;
transform:rotateY(90deg);
}
#val div:nth-of-type(5){top:100px;background:#f0f0FF;
transform-origin:top;
transform:rotateX(-90deg);
}
#val div:nth-of-type(6){background:#ffff00;
transform:translateZ(-100px) rotateX(180deg);
}

#box:hover #val{transform:rotateX(330deg) rotateY(130deg);}
</style>
</head>
<body>

<div id="box">
<div id="val">
<div >
1
</div>
<div >
2
</div>
<div >
3
</div>
<div >
4
</div>
<div >
5
</div>
<div >
6
</div>
</div>
</div>

3D效果，首先给需要进行3D变换的元素父级，添加3d环境和景深。
方法：
transform-style:perserve-3d; 添加3d环境
perspective:数值; 如：300px；

transform
rotateX
rotateY
rotateZ 大风车

translateX
translateY
translateZ

</body>
</html>