css3实现3D盒子

最新推荐文章于 2021-07-30 20:00:36 发布

原创最新推荐文章于 2021-07-30 20:00:36 发布 · 688 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #3D盒子

前端专栏收录该内容

1 篇文章

订阅专栏

博客围绕CSS3和3D盒子展开，虽无具体内容，但可知与利用CSS3技术创建3D盒子相关，CSS3在前端开发中可实现丰富视觉效果，3D盒子是其应用场景之一。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        *{padding: 0;margin:0;}
        html,body{height: 100%;}
        .center{position: absolute;left: 0;right: 0;top:0;bottom: 0;margin:auto auto;}
        .maxDiv{ perspective: 1200px;width: 500px;height: 500px;}
        .minDiv{width: 150px;height: 150px; transform-style: preserve-3d;animation: go 8s linear infinite;}
        .minDiv > div{background:rgba(118,2,253,0.5);width: 150px;height: 150px;box-shadow: 0 0 15px rgba(118,2,253,0.4); position: absolute;transition: 1s;animation-play-state:running;}
        .minDiv:hover{animation-play-state:paused;}
        .minDiv:hover > div{animation: goColor 1s linear infinite; }
        .minDiv > div:nth-child(1){transform: translateZ(-75px);}
        .minDiv > div:nth-child(2){transform:rotateY(90deg) translateZ(75px);}
        .minDiv > div:nth-child(3){transform:rotateY(90deg) translateZ(-75px);}
        .minDiv > div:nth-child(4){transform:rotateX(90deg) translateZ(-75px);}
        .minDiv > div:nth-child(5){transform:rotateX(90deg) translateZ(75px);}
        .minDiv > div:nth-child(6){transform: translateZ(75px);}

        .minDiv:hover > div:nth-child(1){ transform:translateZ(-150px);}
        .minDiv:hover > div:nth-child(3){ transform:rotateY(90deg) translateZ(-150px); }
        .minDiv:hover > div:nth-child(4){ transform:rotateX(90deg) translateZ(-150px);}
        .minDiv:hover > div:nth-child(2){transform:rotateY(90deg) translateZ(150px);}
        .minDiv:hover > div:nth-child(5){transform:rotateX(90deg) translateZ(150px);}
        .minDiv:hover > div:nth-child(6){ transform: translateZ(150px);}
        .minDiv>span{display: block;height: 50px;width: 50px; transform-style: preserve-3d;}
        .minDiv:hover >span{animation: go 4s linear infinite;}
        .minDiv>span>div{height: 50px;width: 50px;position:         absolute;background:rgba(156,225,27,0.6);box-shadow: 0 0 10px rgba(156,225,27,0.5);}
        .minDiv>span>div:nth-child(1){transform: translateZ(-25px);}
        .minDiv>span>div:nth-child(2){transform:rotateY(90deg) translateZ(25px);}
        .minDiv>span>div:nth-child(3){transform:rotateY(90deg) translateZ(-25px);}
        .minDiv>span>div:nth-child(4){transform:rotateX(90deg) translateZ(-25px);}
        .minDiv>span>div:nth-child(5){transform:rotateX(90deg) translateZ(25px);}
        .minDiv>span>div:nth-child(6){transform: translateZ(25px);}
        @keyframes goColor{
            0%{background:rgba(118,2,253,0.2);box-shadow: 0 0 15px rgba(118,2,253,0.2);}
            50%{background:rgba(118,2,253,0.3);box-shadow: 0 0 15px rgba(118,2,253,0.3);}
            100%{background:rgba(118,2,253,0.2);box-shadow: 0 0 15px rgba(118,2,253,0.2);}
        }
        @keyframes go{
            100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) ;}
        }
    </style>
</head>
<div class="maxDiv center">
	<div class="minDiv">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<span class="center">
			 <div></div>
			 <div></div>
			 <div></div>
			 <div></div>
			 <div></div>
			 <div></div>
 		    </span>
        </div>
</div>
</html>