送过女朋友网页相册超好看的3D特效，你值得拥有~

最新推荐文章于 2024-04-10 21:04:58 发布

Odl Dragon

最新推荐文章于 2024-04-10 21:04:58 发布

阅读量597

点赞数 2

文章标签： html5 css css3

本文链接：https://blog.csdn.net/Odl_Dragon/article/details/109050915

版权

3D旋转正方形特效

代码呢我就直接发给你们，然后直接粘贴，记住图片记得自己换一下，目录结构images和index.html是同级就行了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>3D特效（纯css）</title>
    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
        }

        .bigbox {
            width: 10px;
            height: 10px;
            margin: 200px 400px;
            position: relative;
        }

        .box {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            -webkit-animation: mystyle 15s infinite;
            animation-timing-function: linear;
        }

        @-webkit-keyframes mystyle {
            from {
                transform: rotateX(-180deg) rotateY(-180deg);
            }

            to {
                transform: rotateX(180deg) rotateY(180deg);
            }
        }

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

        .bigpic {
            width: 200px;
            height: 200px;
        }

        .box .bigfront {
            transform: rotateY(0deg) translateZ(100px);
        }

        .box .bigback {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .box .bigleft {
            transform: rotateY(90deg) translateZ(100px);
        }

        .box .bigright {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .box .bigtop {
            transform: rotateX(90deg) translateZ(100px);
        }

        .box .bigbottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

        .box span {
            display: block;
            position: absolute;
            width: 140px;
            height: 140px;
            top: 25px;
            left: 25px;
        }

        .box .smallpic {
            width: 140px;
            height: 140px;
        }

        .box .smallleft {
            transform: rotateY(90deg) translateZ(70px);
        }

        .box .smallright {
            transform: rotateY(-90deg) translateZ(70px);
        }

        .box .smalltop {
            transform: rotateX(90deg) translateZ(70px);
        }

        .box .smallbottom {
            transform: rotateX(-90deg) translateZ(70px);
        }

        .box .smallfront {
            transform: rotateY(0deg) translateZ(70px);
        }

        .box .smallback {
            transform: translateZ(-70px) rotateY(180deg);
        }

        /*:hover 我们之前说过的一个css选择器，能够让鼠标指向的时候触发*/
        .box:hover .bigleft {
            transform: rotateY(90deg) translateZ(300px);
        }

        .box:hover .bigright {
            transform: rotateY(-90deg) translateZ(300px);
        }

        .box:hover .bigtop {
            transform: rotateX(90deg) translateZ(300px);
        }

        .box:hover .bigbottom {
            transform: rotateX(-90deg) translateZ(300px);
        }

        .box:hover .bigfront {
            transform: rotateY(0deg) translateZ(300px);
        }

        .box:hover .bigback {
            transform: translateZ(-300px) rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="box">
            <div class="bigfront">
                <img src="image/1.jpg" class="bigpic">
            </div>
            <div class="bigback">
                <img src="image/2.jpeg" class="bigpic">
            </div>
            <div class="bigleft">
                <img src="image/3.jpg" class="bigpic">
            </div>
            <div class="bigright">
                <img src="image/4.jpg" class="bigpic">
            </div>
            <div class="bigtop">
                <img src="image/5.jpeg" class="bigpic">
            </div>
            <div class="bigbottom">
                <img src="image/3af64588153d89be886f8ac3277af047.jpg" class="bigpic">
            </div>
            <span class="smallfront">
                <img src="image/6.jpeg" class="smallpic" />
            </span>
            <span class="smallback">
                <img src="image/8.jpg" class="smallpic" />
            </span>
            <span class="smallleft">
                <img src="image/9.jpg" class="smallpic" />
            </span>
            <span class="smallright">
                <img src="image/10.jpeg" class="smallpic" />
            </span>
            <span class="smalltop">
                <img src="image/11.jpg" class="smallpic" />
            </span>
            <span class="smallbottom">
                <img src="image/12.jpg" class="smallpic" />
            </span>
        </div>
    </div>
</body>

</html>

Odl Dragon

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
送过女朋友网页相册超好看的3D特效，你值得拥有~

3D旋转正方形特效代码呢我就直接发给你们，然后直接粘贴，记住图片记得自己换一下，目录结构images和index.html是同级就行了。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>3D特效（纯css）</title> <style type="text/css"> html {
复制链接

扫一扫