Css实现巨好看3D缩放方块,小白必看,学技术,换图拿去送女朋友[附图片]

本文链接：https://blog.csdn.net/qq_44303191/article/details/107564988

废话不多说,直接上代码,喜欢的话记得给个点赞关注哦,有什么不懂得可以私聊哦,我全天在线的!

这是效果图:

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<style>
/*最外层容器样式*/
           .wrap {
                   width: 200px;
                   height: 200px;
                   margin: 200px;
                   position: relative;
                   }

                   /*包裹所有容器样式*/
                   .cube {
                   width: 200px;
                   height: 200px;
                   margin: 0 auto;
                   transform-style: preserve-3d;
                   transform: rotateX(-30deg) rotateY(-80deg);
                   animation: rotate linear 20s infinite;
                   }

@-webkit-keyframes rotate {
        from {
        transform: rotateX(0deg) rotateY(0deg);
        }
        to {
        transform: rotateX(360deg) rotateY(360deg);
        }
        }

        .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        transition: all .4s;
        }

        /*定义所有图片样式*/
        .pic {
        width: 200px;
        height: 200px;
        }

        .cube .out_front {
        transform: rotateY(0deg) translateZ(100px);
        }

        .cube .out_back {
        transform: translateZ(-100px) rotateY(180deg);
        }

        .cube .out_left {
        transform: rotateY(-90deg) translateZ(100px);
        }

        .cube .out_right {
        transform: rotateY(90deg) translateZ(100px);
        }

        .cube .out_top {
        transform: rotateX(90deg) translateZ(100px);
        }

        .cube .out_bottom {
        transform: rotateX(-90deg) translateZ(100px);
        }

        /*定义小正方体样式*/
        .cube span {
        display: block;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
        }

        .cube .in_pic {
        width: 100px;
        height: 100px;
        }

        .cube .in_front {
        transform: rotateY(0deg) translateZ(50px);
        }

        .cube .in_back {
        transform: translateZ(-50px) rotateY(180deg);
        }

        .cube .in_left {
        transform: rotateY(-90deg) translateZ(50px);
        }

        .cube .in_right {
        transform: rotateY(90deg) translateZ(50px);
        }

        .cube .in_top {
        transform: rotateX(90deg) translateZ(50px);
        }

        .cube .in_bottom {
        transform: rotateX(-90deg) translateZ(50px);
        }

        /*鼠标移入后样式*/
        .cube:hover .out_front {
        transform: rotateY(0deg) translateZ(200px);
        }

        .cube:hover .out_back {
        transform: translateZ(-200px) rotateY(180deg);
        }

        .cube:hover .out_left {
        transform: rotateY(-90deg) translateZ(200px);
        }

        .cube:hover .out_right {
        transform: rotateY(90deg) translateZ(200px);
        }

        .cube:hover .out_top {
        transform: rotateX(90deg) translateZ(200px);
        }

        .cube:hover .out_bottom {
        transform: rotateX(-90deg) translateZ(200px);
        }
</style>
</head>

<body>
<!-- 外层最大容器 -->
<div class="wrap">
<!--包裹所有元素的容器-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="img/a1.jpg" class="pic" />
</div>
<!--后面图片 -->
<div class="out_back">
<img src="img/a2.jpg" class="pic" />
</div>
<!--左面图片 -->
<div class="out_left">
<img src="img/a3.jpg" class="pic" />
</div>
<!--右面图片 -->
<div class="out_right">
<img src="img/a4.jpg" class="pic" />
</div>
<!--上面图片 -->
<div class="out_top">
<img src="img/a5.jpg" class="pic" />
</div>
<!--下面图片 -->
<div class="out_bottom">
<img src="img/a6.jpg" class="pic" />
</div>

<!--小正方体 -->
<span class="in_front">
<img src="img/a0.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="img/a0.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="img/a0.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="img/a0.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="img/a0.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="img/a0.jpg" class="in_pic" />
</span>
</div>

</div>
</body>
</html>