前面的文章:
今天做一个3D的box,能动的哦,还有鼠标交互的哦。
在抖音上看的一个效果。有45w+的点赞,还有n多人在求源码。
觉得有意思,自己也做了一个。
鼠标放上去前:
鼠标移动上去后:
主要知识点:
CSS3 中的3D 样式综合运用。
HTML结构:
<div class="box">
<ul class="b1">
<li><img src="images/3d/1.jpg" alt=""></li>
<li><img src="images/3d/2.jpg" alt=""></li>
<li><img src="images/3d/3.jpg" alt=""></li>
<li><img src="images/3d/4.jpg" alt=""></li>
<li><img src="images/3d/5.jpg" alt=""></li>
<li><img src="images/3d/6.jpg" alt=""></li>
<li><img src="images/3d/7.jpg" alt=""></li>
<li><img src="images/3d/8.jpg" alt=""></li>
<li><img src="images/3d/9.jpg" alt=""></li>
<li><img src="images/3d/10.jpg" alt=""></li>
<li><img src="images/3d/11.jpg" alt=""></li>
<li><img src="images/3d/12.jpg" alt=""></li>
</ul>
</div>
两个盒子,一个大,一个小。一共12个面,所以,用了 12 个 li 标签。
CSS:
*{
margin: 0;
padding: 0;
}
ul,li,ol{
list-style: none;
}
/*
框架样式。主要是设置宽高 和 3d。
*/
.box{
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 300px;
position: relative;
perspective: 500px; /*把内部变成 3d 透视空间*/
}
/*
两个 ul 让他们绝对定位,才能任意摆放他们的位置。
*/
.b1{
position: absolute;
width: 100px;
height: 100px;
top: 0;
left:0;
transform-style: preserve-3d; /*让子标签的transform有3d效果*/
}
/* li 和 img 大小,定位设置 。
li 都是绝对定位,这样才能让它们的位置随意摆放。
*/
.box img,
.box li{
width: 100px;
height: 100px;
transition:all 0.5s;
}
.b1 li:nth-child(n+7),
.b1 li:nth-child(n+7) img{
width: 200px;
height: 200px;
}
.box li{
position: absolute;
overflow: hidden;
}
.b1 li:nth-child(n+7){
opacity: 0.2;
left:-50px; /* 把小盒子包裹在大盒子中间 */
top:-50px;
}
/*
让每个 ul 做成盒子的样子。
对每个 li 都独立设置样式。
*/
/*盒子正面*/
.b1 li:nth-child(1) {
transform: translateZ(50px); /* tZ位移100px,朝前方位移。*/
/* 图片的宽度是200 */
}
.b1 li:nth-child(7){
transform: translateZ(100px);
}
/*盒子背面*/
.b1 li:nth-child(2) {
transform: translateZ(-50px); /* tZ 为负,朝后方位移*/
}
.b1 li:nth-child(8){
transform:translateZ(-100px);
}
/*盒子左面*/
.b1 li:nth-child(3) {
transform: rotateY(-90deg) translateZ(50px); /* tZ 为正,朝前方位移*/
}
.b1 li:nth-child(9){
transform: rotateY(-90deg) translateZ(100px);
}
/*盒子右面*/
.b1 li:nth-child(4){
transform: rotateY(90deg) translateZ(50px);
}
.b1 li:nth-child(10){
transform: rotateY(90deg) translateZ(100px);
}
/*盒子上面*/
.b1 li:nth-child(5) {
transform: rotateX(90deg) translateZ(50px);
}
.b1 li:nth-child(11){
transform: rotateX(90deg) translateZ(100px);
}
/*盒子下面*/
.b1 li:nth-child(6){
transform: rotateX(-90deg) translateZ(50px);
}
.b1 li:nth-child(12){
transform: rotateX(-90deg) translateZ(100px);
}
/*旋转动画*/
@keyframes xuanzhuanAni {
0%{
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.b1{
animation: xuanzhuanAni 20s infinite linear;
}
.box:hover .b1 li:nth-child(7){
transform: translateZ(200px);
opacity: 1;
}
.box:hover .b1 li:nth-child(8){
opacity: 1;
transform:translateZ(-200px);
}
.box:hover .b1 li:nth-child(9){
opacity: 1;
transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .b1 li:nth-child(10){
opacity: 1;
transform: rotateY(90deg) translateZ(200px);
}
.box:hover .b1 li:nth-child(11){
opacity: 1;
transform: rotateX(90deg) translateZ(200px);
}
.box:hover .b1 li:nth-child(12){
opacity: 1;
transform: rotateX(-90deg) translateZ(200px);
}
整个效果不解释了,CSS代码注释的很详细。
码字不容易,图片可能有点禁忌,管理员不要删啊~~