CSS旋转魔方
想不想做一个3D魔方,把儿子的照片放进去,外面是你,里面是他。本人从业至今,自诩是动画机器人,苦心钻研各种动画,精通CSS3、Canvas等,不管你要做什么,关注我一个人就够了,跟我一起把代码写活。
一定要先做下广告,希望大家浏览博客的同时,可以点一下我的置顶博文。本人入驻CSDN一年,作品都是开源,没有任何一篇博客要求付费可读,并及时回复各种疑难问题,我不需要大家给我任何的经济援助,你的鼓励才是我发表博文最大的动力。
如果你觉得我的代码还算有趣,在你的学习中能有所帮助,请查看我的置顶文章,我由衷感谢!
前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获,专业的知识还得到机构去学习,培训机构的设立有其存在的必然性,你钱花对了吗?
不说了,上源码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>亲子相册</title>
<style>
html,body{
width: 100%;
height: 100%;
margin:0;
background: url(https://i02piccdn.sogoucdn.com/73750308f69893a3);
background-repeat:repeat;
}
.box{
width: 100%;
height: 400px;
position: absolute;
top: 19%;
transform: rotateY(45deg) rotateX(-20deg);
transform-style: preserve-3d;
}
.box:first-child{
left:24%;
}
.box:last-child{
right:24%;
}
/*里面的盒子*/
.box> .in{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
/*开启3d*/
transform-style: preserve-3d;
transform: translate(-50%,-50%) rotateY(45deg) rotateX(-20deg);
/*调用动画*/
animation: mofan 5s linear 0s infinite normal;
z-index: 100;
}
/*里面盒子六个面的共同值*/
.box> .in>div{
width: 100px;
height: 100px;
position: absolute;
opacity: 0.7;
border: 1px solid white;
}
/*里面盒子的六个面*/
/*前*/
.n1{
background-color: #00ffff;
transform:translateZ(51px);
}
/*后*/
.n2{
background-color: black;
transform: translateZ(-51px);
}
/*左*/
.n3{
background-color: black;
transform: translateX(-51px) rotateY(90deg);
}
/*右*/
.n4{
background-color: #00ffff;
transform: translateX(51px) rotateY(90deg);
}
/*上*/
.n5{
background-color: #00ffff;
transform: translateY(-51px) rotateX(90deg);
}
/*下*/
.n6{
background-color: black;
transform: translateY(51px) rotateX(90deg);
}
/*里面盒子的六个面结束*/
/*动画*/
@keyframes mofan{
from{
transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg) ;
}
to{
transform: translate(-50%,-50%) rotateY(360deg) rotateX(0deg);
}
}
@keyframes nixuan{
from{
transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg) ;
}
to{
transform: translate(-50%,-50%) rotateY(-360deg) rotateX(0deg);
}
}
/*外面的盒子*/
.box>.out{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform-style: preserve-3d;
transform: translate(-50%,-50%) ;
/*调用动画*/
animation: mofan 5s linear 0s infinite normal;
color: white;
}
.box>.out>.t1,.t2,.t3,.t4,.t5,.t6{
width: 200px;
height: 200px;
position: absolute;
opacity: 0.5;
border: 1px solid white;
transition: all .3s;
}
/*前*/
.t1{
background-color: #92C7DC;
transform:translateZ(100px);
}
.t1>img{height:100%}
/*后*/
.t2{
background-color: #92C7DC;
transform: translateZ(-100px);
}
/*左*/
.t3{
background-color: #92C7DC;
transform: translateX(-100px) rotateY(90deg);
}
/*右*/
.t4{
background-color: #92C7DC;
transform: translateX(100px) rotateY(90deg);
}
/*上*/
.t5{
background-color: #92C7DC;
transform: translateY(-100px) rotateX(90deg);
}
/*下*/
.t6{
background-color: #92C7DC;
transform: translateY(100px) rotateX(90deg);
}
.box:hover>.out>.t1{
transform: translateZ(300px);
}
.box:hover>.out>.t2{
transform: translateZ(-300px);
}
.box:hover>.out>.t3{
transform: translateX(-300px) rotateY(90deg);
}
.box:hover>.out>.t4{
transform: translateX(300px) rotateY(90deg);
}
.box:hover>.out>.t5{
transform: translateY(-300px) rotateX(90deg);
}
.box:hover>.out>.t6{
transform: translateY(300px) rotateX(90deg);
}
/*鼠标悬浮时外盒子逆转*/
.box:hover>.out{
animation: nixuan 5s linear 0s infinite normal;
}
.n1,.n4,.n5{
background-image: linear-gradient(to right,#00ffff,black)
}
.k1{
width: 29.3px;
height: 29.3px;
border: 2px solid white;
float: left;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="box">
<div class="in">
<div class="n1">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n2">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n3">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n4">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n5">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n6">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
</div>
<div class="out">
<div class="t1"><img src="https://img-blog.csdnimg.cn/2020090116353966.png#pic_center" alt=""></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="t4"></div>
<div class="t5"></div>
<div class="t6"></div>
</div>
</div>
<div class="box">
<div class="in">
<div class="n1">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n2">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n3">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n4">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n5">
<div class="k1"><img src="https://img-blog.csdnimg.cn/20200901163533997.png#pic_center" alt=""></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
<div class="n6">
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</div>
</div>
<div class="out">
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="t4"></div>
<div class="t5"></div>
<div class="t6"></div>
</div>
</div>
</body>
</html>
回答一下博友提问:
F12进入开发者模式,选中类名是 “ in ” 的小魔方,可以查看此元素的CSS样式。在第200行为了层次分明,添加了渐变色,background-image 和 background-color是不同的属性,background-image的优先级高于background-color,比如有关背景的简写:background:#99f url() no-repeat top; 所以你操作background-color在视觉上没有变化。
并且,在200行之前,你图片背景也是加不上的,因为是同属性,代码执行到第200行,会覆盖掉你之前赋予的属性值,可能明白?
注释掉这一行代码,你就能修改背景色了。
文章主题部分已标明注释,毕竟是CSS页面,大批量的注释没有太多意义,如果在动画方面有些许疑问,可以评论在下方,或单独私信我,也可以浏览“ 这篇 ” 文章。
本人已入驻CSDN近两年,所有作品都是开源,也从未在文章上设置“粉丝可读、VIP可读、付费可读”,但一直没有什么人气。希望路过的你可以阅读一下其它文章,万分感激。