项目效果
实现原理
先给一个星空背景，再创建一个大的div ，里面在创建6个小的div也就是六个面，再给他们一个position: absolute使他们重叠在一起，再给一个transform: translateZ(px)（最佳给的是宽高的一半），剩余的再给一个动画旋转，下面有代码来分步来说
1、先做出背景图和一个有3d效果的方块图
HTML部分
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
<div class="son5"></div>
<div class="son6"></div>
</div>
</body>
CSS部分
<style>
*{
margin: 0;
padding: 0;
}
:root,body{
width: 100%;
height: 100%;
}
body{
height: 100%;
background-image: url(img/1.jpeg);
background-size:cover;
perspective: 3000px;
transform-style: preserve-3d;
perspective-origin: 750px 800px;
}
.father{
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
.father div{
width: 100px;
height: 100px;
position: absolute;
}
效果图
2、之后给他一个3d效果让其在Y轴上旋转再给他一个动画效果，使其旋转起来。
CSS部分
@keyframes run{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
.father{
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
animation: run 3s linear infinite;
transform-style: preserve-3d;
}
效果
3、给其一个最大的div实现外部的6个浅色的面
HTML部分
<body>
<div class="box">
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
<div class="son5"></div>
<div class="son6"></div>
</div>
<div class="logo1"></div>
<div class="logo2"></div>
<div class="logo3"></div>
<div class="logo4"></div>
<div class="logo5"></div>
<div class="logo6"></div>
</div>
</body>
CSS部分
.logo1,.logo2,.logo3,.logo4,.logo5,.logo6{
width: 300px;
height: 300px;
background-color: rgba(150, 148, 148, 0.2);
position: absolute;
}
.box .logo1{
transform: translateZ(150px);
}
.box .logo2{
transform: rotateY(-180deg) translateZ(150px);
}
.box .logo3{
transform: rotateX(90deg) translateZ(150px);
}
.box .logo4{
transform: rotateX(-90deg) translateZ(150px);
}
.box .logo5{
transform: rotateY(90deg) translateZ(150px);
}
.box .logo6{
transform: rotateY(-90deg) translateZ(150px);
}
4、给外面六个面一个伪类，使其鼠标放上去的时候进行扩散
.box:hover .logo1{
transition: all 2s;
transform: translateZ(250px);
}
.box:hover .logo2{
transition: all 2s;
transform: rotateY(-180deg) translateZ(250px);
}
.box:hover .logo3{
transition: all 2s;
transform: rotateX(90deg) translateZ(250px);
}
.box:hover .logo4{
transition: all 2s;
transform: rotateX(-90deg) translateZ(250px);
}
.box:hover .logo5{
transition: all 2s;
transform: rotateY(90deg) translateZ(250px);
}
.box:hover .logo6{
transition: all 2s;
transform: rotateY(-90deg) translateZ(250px);
}
最后给其一个动画进行旋转，完整代码如下：
HTML部分：
扫描二维码关注公众号，回复：
12406934 查看本文章
<body>
<div class="box">
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son4"></div>
<div class="son5"></div>
<div class="son6"></div>
</div>
<div class="logo1"></div>
<div class="logo2"></div>
<div class="logo3"></div>
<div class="logo4"></div>
<div class="logo5"></div>
<div class="logo6"></div>
</div>
</body>
CSS部分
<style>
*{
margin: 0;
padding: 0;
}
:root,body{
width: 100%;
height: 100%;
}
body{
height: 100%;
background-image: url(img/1.jpeg);
background-size:cover;
perspective: 3000px;
transform-style: preserve-3d;
perspective-origin: 750px 800px;
}
.box{
width: 300px;
height: 300px;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
animation: run 3s linear infinite;
transform-style: preserve-3d;
}
.logo1,.logo2,.logo3,.logo4,.logo5,.logo6{
width: 300px;
height: 300px;
background-color: rgba(150, 148, 148, 0.2);
position: absolute;
}
.box .logo1{
transform: translateZ(150px);
}
.box .logo2{
transform: rotateY(-180deg) translateZ(150px);
}
.box .logo3{
transform: rotateX(90deg) translateZ(150px);
}
.box .logo4{
transform: rotateX(-90deg) translateZ(150px);
}
.box .logo5{
transform: rotateY(90deg) translateZ(150px);
}
.box .logo6{
transform: rotateY(-90deg) translateZ(150px);
}
.father{
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
.father div{
width: 100px;
height: 100px;
position: absolute;
}
.son1{
transform: translateZ(50px);
background-image: url(img/2.jpg);
}
.son2{
transform: rotateY(-180deg) translateZ(50px);
background-image: url(img/3.jpeg);
}
.son3{
transform: rotateX(90deg) translateZ(50px);
background-image: url(img/4.jpg);
}
.son4{
transform: rotateX(-90deg) translateZ(50px);
background-image: url(img/5.jpg);
}
.son5{
transform: rotateY(90deg) translateZ(50px);
background-image: url(img/6.jpg);
}
.son6{
transform: rotateY(-90deg) translateZ(50px);
background-image: url(img/7.jpeg);
}
.box:hover .logo1{
transition: all 2s;
transform: translateZ(250px);
}
.box:hover .logo2{
transition: all 2s;
transform: rotateY(-180deg) translateZ(250px);
}
.box:hover .logo3{
transition: all 2s;
transform: rotateX(90deg) translateZ(250px);
}
.box:hover .logo4{
transition: all 2s;
transform: rotateX(-90deg) translateZ(250px);
}
.box:hover .logo5{
transition: all 2s;
transform: rotateY(90deg) translateZ(250px);
}
.box:hover .logo6{
transition: all 2s;
transform: rotateY(-90deg) translateZ(250px);
}
@keyframes run{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
</style>
最终呈现
有改进的地方，请各位大佬指教一下。
2021，大吉大利
