CSS3干货6：CSS中3D运用-3

前面的文章：

CSS3干货4：CSS中3D运用

CSS3干货5：CSS中3D运用-2

今天做一个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代码注释的很详细。

 

码字不容易，图片可能有点禁忌，管理员不要删啊~~