分享一个3D旋转图片盒子效果-CSDN博客

本文链接：https://blog.csdn.net/m0_60467232/article/details/127884684
效果：

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="margin: 200px 300px;width: 40%;">
    <div>
        <div>
            <title>HTML5 3D立体动画照片旋转</title>

            <link href="css/style.css" rel="stylesheet" type="text/css">
            <style text="text/css">
                /*实现立体效果*/
                .img {
                    width: 50px;
                    height: 50px;
                    margin: 0 auto;
                    transform-style: preserve-3d;
                    /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
                    animation: rotate linear 20s infinite;
                }

                /*实现动画效果*/
                @-webkit-keyframes rotate { /*sofari chrome*/
                    from {
                        transform: rotateX(0deg) rotateY(0deg);
                    }
                    to {
                        transform: rotateX(360deg) rotateY(360deg);
                    }
                }

                /*图片样式*/
                .pic {
                    width: 200px;
                    height: 200px;
                    transform: rotateY(0deg) translateZ(100px);
                }
            </style>
            <style type="text/css">
                /*最外层容器样式*/
                .wrap {
                    width: 0px;
                    height: 0px;
                    margin: 0px;
                    position: absolute;
                }

                /*得到立方体效果*/
                .cube {
                    width: 50px;
                    height: 50px;
                    margin: 0 auto;
                    transform-style: preserve-3d;
                    /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
                    animation: rotate linear 20s infinite;
                }

                /*动画旋转的方式*/
                /*得到动画效果*/
                @-moz-keyframes rotate { /*firefox*/
                    from {
                        transform: rotateX(0deg) rotateY(0deg);
                    }
                    to {
                        transform: rotateX(360deg) rotateY(360deg);
                    }
                }

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

                @-o-keyframes rotate { /*opera*/
                    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>

            <div style="display: none" id="__document_write_ajax_div-1"></div>
            <script type="text/javascript">window['__document_write_ajax_callbacks__']['1']();</script>

            <script type="text/javascript">window['__document_write_ajax_callbacks__']['5']();</script>
            <script type="text/javascript">window['__document_write_ajax_callbacks__']['6']();</script>
            <script>window['__document_write_ajax_callbacks__']['2']();</script>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

            <script type="text/javascript">window['__document_write_ajax_callbacks__']['7']();</script>
            <script>window['__document_write_ajax_callbacks__']['3']();</script>
        </div>
        <div>
            <div class="wrap">
                <!--部署内外层图片-->
                <div class="cube">
                    <!--前面图片 -->
                    <div class="out_front">
                        <img src="img/img1.jpg" class="pic">
                    </div>
                    <!--后面图片 -->
                    <div class="out_back">
                        <img src="img/img1.jpg" class="pic">
                    </div>
                    <!--左面图片 -->
                    <div class="out_left">
                        <img src="img/img1.jpg" class="pic">
                    </div>
                    <!--右面图片 -->
                    <div class="out_right">
                        <img src="img/img1.jpg" class="pic">
                    </div>
                    <!--上面图片 -->
                    <div class="out_top">
                        <img src="img/img1.jpg" class="pic">
                    </div>
                    <!--下面图片 -->
                    <div class="out_bottom">
                        <img src="img/img1.jpg" class="pic">
                    </div>
                    <!--小正方体 -->
                    <span class="in_front">
                     <img src="img/img1.jpg" class="pic" style="width: 100px;height: 100px">
                </span>

                    <span class="in_back">
                     <img src="img/img1.jpg" class="pic" style="width: 100px;height: 100px">
                </span>

                    <span class="in_left">
                     <img src="img/img1.jpg" class="pic" style="width: 100px;height: 100px">
                </span>

                    <span class="in_right">
                     <img src="img/img1.jpg" class="pic" style="width: 100px;height: 100px">
                </span>

                    <span class="in_top">
                     <img src="img/img1.jpg" class="pic" style="width: 100px;height: 100px">
                </span>
                    <span class="in_bottom">
                     <img src="img/img1.jpg" class="pic" style="width: 100px;height: 100px">
                </span>

                </div>

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