网页设计之css炫酷3d盒子效果

最新推荐文章于 2024-07-29 09:17:12 发布

qq_39992635

最新推荐文章于 2024-07-29 09:17:12 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_39992635/article/details/80927471

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3dBox</title>
</head>
<style>
html{perspective: 2000px;}
.box{width: 200px;height: 200px;position: relative;animation: xuanzhun 5s infinite;transform-style: preserve-3d;margin: 150px auto;}
@keyframes xuanzhun{
0%{transform: rotateX(0) rotateY(0) rotateZ(0);}
100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
.box:hover .front{transform: translateZ(200px);}
.box:hover .back{transform: translateZ(-200px);}
.box:hover .left{transform: translateX(200px) rotateY(90deg);}
.box:hover .right{transform: translateX(-200px) rotateY(90deg);}
.box:hover .top{transform: translateY(200px) rotateX(90deg);}
.box:hover .bottom{transform: translateY(-200px) rotateX(90deg);}

.box>div{width: 100%;height: 100%;background-color: #666;position: absolute;opacity: 0.3;border: 1px solid #666;transition: 1s;}
.box>span{width: 50px;height: 50px;background-color: #444;position: absolute;top:75px;left: 75px;opacity: 0.3;border: 1px solid #444;}

.front{transform: translateZ(100px);}
.back{transform: translateZ(-100px);}
.left{transform: translateX(100px) rotateY(90deg);}
.right{transform: translateX(-100px) rotateY(90deg);}
.top{transform: translateY(100px) rotateX(90deg);}
.bottom{transform: translateY(-100px) rotateX(90deg);}

.in-front{transform: translateZ(25px);}
.in-back{transform: translateZ(-25px);}
.in-left{transform: translateX(25px) rotateY(90deg);}
.in-right{transform: translateX(-25px) rotateY(90deg);}
.in-top{transform: translateY(25px) rotateX(90deg);}
.in-bottom{transform: translateY(-25px) rotateX(90deg);}

</style>
<body>
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
<span class="in-front"></span>
<span class="in-back"></span>
<span class="in-left"></span>
<span class="in-right"></span>
<span class="in-top"></span>
<span class="in-bottom"></span>
</div>
</body>
</html>