jq实现3D万花筒效果 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS3图片万花筒3D旋转动画特效</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        img {
            width: 200px;
            height: 300px;
        }
        
        body {
            background-color: #fff;
        }
        /* 动画  沿着X轴倾斜-15deg，动画沿着Y轴旋转 */
        
        @keyframes fn {
            0% {
                transform: rotateX(-15deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(-15deg) rotateY(360deg);
            }
        }
        
        @-moz-keyframes fn {
            0% {
                transform: rotateX(-15deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(-15deg) rotateY(360deg);
            }
        }
        
        @-ms-keyframes fn {
            0% {
                transform: rotateX(-15deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(-15deg) rotateY(360deg);
            }
        }
        
        @-webkit-keyframes fn {
            0% {
                transform: rotateX(-15deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(-15deg) rotateY(360deg);
            }
        }
        /* 动画加给了父盒子 */
        
        .box {
            width: 200px;
            height: 300px;
            position: relative;
            margin: auto;
            margin-top: 150px;
            transform-style: preserve-3d;
            transform: rotateX(-10deg);
            animation: fn 10s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            position: relative
        }
        /* 鼠标滑过，停止旋转*/
        
        .box:hover {
            animation-play-state: paused;
        }
        
        .box>div {
            width: 200px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

</head>

<body>
    <div class="box">
        <!-- 图片 -->
        <div>
            <img src="https://img1.baidu.com/it/u=2519912129,4264910682&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500">
        </div>
        <div>
            <img src="https://img2.baidu.com/it/u=148808237,2924100619&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
        </div>
        <div>
            <img src="https://img0.baidu.com/it/u=1086697265,3145411761&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332">
        </div>
        <div>
            <img src="https://img0.baidu.com/it/u=1348859053,1340239256&fm=253&fmt=auto&app=120&f=JPEG?w=680&h=453">
        </div>
        <div>
            <img src="https://img0.baidu.com/it/u=1159606524,30417437&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500">
        </div>
        <div>
            <img src="https://img2.baidu.com/it/u=1557726807,2693077908&fm=253&fmt=auto&app=138&f=JPEG?w=695&h=500">
        </div>
        <div>
            <img src="https://img0.baidu.com/it/u=2463602844,2410523677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333">
        </div>
    </div>
    <script>
        $(function() {

            var imgL = $(".box div").size();
            console.log(imgL)
            var deg = 360 / (imgL - 1);
            //注意这边是遍历，别忘记i
            $(".box div").each(function(i) {
                $(this).css({
                    // <!--translateZ 定义2d旋转沿着z轴-->
                    "transform": "rotateY(" + i * deg + "deg) translateZ(275px)"
                });
                // <!--防止图片被拖拽-->
                $(this).attr('ondragstart', 'return false');
            });
        })
    </script>
    </div>
</body>

</html>

 

posted @ 2022-02-17 10:52  _houjie  阅读(128)  评论(0)  编辑  收藏  举报