纯CSS实现鼠标经过3D立体动态展示图片特效代

最新推荐文章于 2024-01-30 00:54:17 发布
Promenade 漫步
最新推荐文章于 2024-01-30 00:54:17 发布
阅读量435
点赞数
文章标签： html
本文链接：https://blog.csdn.net/weixin_46378616/article/details/124277974
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title>
    <link type="xiao/css" href="css/style.css" rel="stylesheet" />
</head>

<body>
    <div class="box">
        <ul class="minbox">
            <li>
                <img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto13.zastatic.com%2Fimages%2Fphoto%2F8492%2F33965810%2F1470071534391_2.jpg&refer=http%3A%2F%2Fphoto13.zastatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652950059&t=7d6bbcaea7440956042f49fa72393185">

            </li>
            <li>照片</li>
            <li>照片</li>
            <li>照片</li>
            <li>照片</li>
            <li>照片</li>
        </ul>
        <ol class="maxbox">
            <li> <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto13.zastatic.com%2Fimages%2Fphoto%2F8492%2F33965810%2F1470071534391_2.jpg&refer=http%3A%2F%2Fphoto13.zastatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652950059&t=7d6bbcaea7440956042f49fa72393185"></li>
            <li> <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto13.zastatic.com%2Fimages%2Fphoto%2F8492%2F33965810%2F1470071534391_2.jpg&refer=http%3A%2F%2Fphoto13.zastatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652950059&t=7d6bbcaea7440956042f49fa72393185"></li>
            <li>照片</li>
            <li>照片</li>
            <li>照片</li>
            <li>照片</li>
        </ol>
    </div>
</body>

</html>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        max-width: 100%;
        min-width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
    }

    li {
        list-style: none;
    }

    .box {
        width: 200px;
        height: 200px;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        position: absolute;
        margin-left: 42%;
        margin-top: 22%;
        -webkit-transform-style: preserve-3d;
        -webkit-transform: rotateX(13deg);
        -webkit-animation: move 5s linear infinite;
    }

    .minbox {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50px;
        top: 30px;
        -webkit-transform-style: preserve-3d;
    }

    .minbox li {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;

    }

    .minbox li img {
        width: 100%;
        height: 100%;
    }
    .maxbox li img {
        width: 100%;
        height: 100%;
    }
    .minbox li:nth-child(1) {
        background: url(../img/01.png) no-repeat 0 0;
        -webkit-transform: translateZ(50px);
    }

    .minbox li:nth-child(2) {
        background: url(../img/02.png) no-repeat 0 0;
        -webkit-transform: rotateX(180deg) translateZ(50px);
    }

    .minbox li:nth-child(3) {
        background: url(../img/03.png) no-repeat 0 0;
        -webkit-transform: rotateX(-90deg) translateZ(50px);
    }

    .minbox li:nth-child(4) {
        background: url(../img/04.png) no-repeat 0 0;
        -webkit-transform: rotateX(90deg) translateZ(50px);
    }

    .minbox li:nth-child(5) {
        background: url(../img/05.png) no-repeat 0 0;
        -webkit-transform: rotateY(-90deg) translateZ(50px);
    }

    .minbox li:nth-child(6) {
        background: url(../img/06.png) no-repeat 0 0;
        -webkit-transform: rotateY(90deg) translateZ(50px);
    }

    .maxbox li:nth-child(1) {
        background: url(../img/1.png) no-repeat 0 0;
        -webkit-transform: translateZ(50px);
    }

    .maxbox li:nth-child(2) {
        background: url(../img/2.png) no-repeat 0 0;
        -webkit-transform: translateZ(50px);
    }

    .maxbox li:nth-child(3) {
        background: url(../img/3.png) no-repeat 0 0;
        -webkit-transform: rotateX(-90deg) translateZ(50px);
    }

    .maxbox li:nth-child(4) {
        background: url(../img/4.png) no-repeat 0 0;
        -webkit-transform: rotateX(90deg) translateZ(50px);
    }

    .maxbox li:nth-child(5) {
        background: url(../img/5.png) no-repeat 0 0;
        -webkit-transform: rotateY(-90deg) translateZ(50px);
    }

    .maxbox li:nth-child(6) {
        background: url(../img/6.png) no-repeat 0 0;
        -webkit-transform: rotateY(90deg) translateZ(50px);
    }

    .maxbox {
        width: 800px;
        height: 400px;
        position: absolute;
        left: 0;
        top: -20px;
        -webkit-transform-style: preserve-3d;

    }

    .maxbox li {
        width: 200px;
        height: 200px;
        background: #fff;
        border: 1px solid #ccc;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.2;
        -webkit-transition: all 1s ease;
    }

    .maxbox li:nth-child(1) {
        -webkit-transform: translateZ(100px);
    }

    .maxbox li:nth-child(2) {
        -webkit-transform: rotateX(180deg) translateZ(100px);
    }

    .maxbox li:nth-child(3) {
        -webkit-transform: rotateX(-90deg) translateZ(100px);
    }

    .maxbox li:nth-child(4) {
        -webkit-transform: rotateX(90deg) translateZ(100px);
    }

    .maxbox li:nth-child(5) {
        -webkit-transform: rotateY(-90deg) translateZ(100px);
    }

    .maxbox li:nth-child(6) {
        -webkit-transform: rotateY(90deg) translateZ(100px);
    }

    .box:hover ol li:nth-child(1) {
        -webkit-transform: translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top: -100px;
    }

    .box:hover ol li:nth-child(2) {
        -webkit-transform: rotateX(180deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top: -100px;
    }

    .box:hover ol li:nth-child(3) {
        -webkit-transform: rotateX(-90deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top: -100px;
    }

    .box:hover ol li:nth-child(4) {
        -webkit-transform: rotateX(90deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top: -100px;
    }

    .box:hover ol li:nth-child(5) {
        -webkit-transform: rotateY(-90deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top: -100px;
    }

    .box:hover ol li:nth-child(6) {
        -webkit-transform: rotateY(90deg) translateZ(300px);
        width: 400px;
        height: 400px;
        opacity: 0.8;
        left: -100px;
        top: -100px;
    }

    @keyframes move {
        0% {
            -webkit-transform: rotateX(13deg) rotateY(0deg);
        }

        100% {
            -webkit-transform: rotateX(13deg) rotateY(360deg);
        }
    }
</style>