利用css3和js实现旋转木马图片小demo

落日映苍穹つ 2023-08-17 15:23 130阅读 0赞

先看效果图：

![1609428-20190812134314326-433135295.gif][]

上源码

html代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
    </head>
    
    <body>
        <div class="box">
            <img src="./img/1.png" alt="">
            <img src="./img/2.png" alt="">
            <img src="./img/3.png" alt="">
            <img src="./img/4.png" alt="">
            <img src="./img/5.png" alt="">
            <img src="./img/6.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/2.png" alt="">
            <img src="./img/3.png" alt="">
            <img src="./img/4.png" alt="">
            <img src="./img/5.png" alt="">
            <img src="./img/6.png" alt="">
        </div>
        <script src="./jquery-3.3.1.js"></script>
        <script src="./index.js"></script>
    </body>
    
    </html>

css代码

*{
        
        margin:0;
        padding:0;
    }
    html,body{
        
        width:100%;
        height:100%;
        background-image:radial-gradient(circle at center center,rgba(244,23,234,0.2),rgba(0,0,0));
        background-color:#000;
        overflow: hidden;
        perspective: 1000px;
    }
    .box{
        
        position: relative;
        width:120px;
        height:180px;
        margin:200px auto;
        transform-style:preserve-3d; 
    }
    .box img{
        
        position: absolute;
        width:100%;
        height:100%;
        -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);   /*倒影*/
    }

js(jquery)代码

window.onload = function () {
        var img = $('img');
        var len = img.length;
        var deg = 360 / len;
        for (var i = 0; i < len; i++) {
            $('img').eq(i).css({
                'transform': 'rotateY(' + i * deg + 'deg) translateZ(300px)',
                'transition': 'transform 0.5s linear ' + (len - 1 - i) * 0.1 + 's'
            }) //实现 刚开始的发牌效果。
        };
        bindEvent();
    }
    function bindEvent() {
        var box = $('.box');
        var body = $('body');
        var lastX, lastY, nowX, nowY, disX, disY;
        var roX = 0, roY = 0;
        var timer;
        body.on('mousedown', function (e) {
            clearInterval(timer);
            lastX = e.clientX;
            lastY = e.clientY;
            body.on('mousemove', function (e) {
                nowX = e.clientX;
                nowY = e.clientY;
    
                disX = nowX - lastX;
                disY = nowY - lastY;
    
                roX -= disY * 0.2;
                roY += disX * 0.2;
    
                roX = roX % 360;
                roY = roY % 360;
    
                box.css({
                    'transform': 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)',
                });
    
                lastX = nowX;
                lastY = nowY;
            })
            return false;
        }).on('mouseup', function () {
    
            body.off('mousemove');
            // 以下是缓冲
            timer = setInterval(function () {
                disX *= 0.95;
                disY *= 0.95;
                roX -= disY * 0.5;
                roY += disX * 0.5;
    
                roX = roX % 360;
                roY = roY % 360;
    
                box.css({
                    'transform': 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)',
                });
    
                if (Math.abs(disX) < 0.01 && Math.abs(disY) < 0.01) {
                    clearInterval(timer);
                }
    
            }, 20);
        });
    }

转载于:https://www.cnblogs.com/yanggeng/p/11339543.html

[1609428-20190812134314326-433135295.gif]: /images/20230810/11ea8a3f5df2404ebdff17a270f071a6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关利用css3和js实现旋转木马图片小demo

先看效果图： ![1609428-20190812134314326-433135295.gif][] 上源码 html代码 <!DOCTYPE html>

落日映苍穹つ/ 2023年08月17日 15:23/ 0 赞/ 131 阅读

相关利用css3实现照片列表展开小demo

　　效果如下: ![1609428-20190809013920163-1646756365.gif][] 其实实现起来很简单，就是控制宽高的变化，然后给他加上tran

r囧r小猫/ 2023年08月17日 15:23/ 0 赞/ 117 阅读

相关 js实现旋转木马相册

鼠标拖拽效果图如下： ![在这里插入图片描述][20200402084625113.gif] 旋转效果图如下： ![在这里插入图片描述][20200402084046

太过爱你忘了你带给我的痛/ 2023年07月20日 13:45/ 0 赞/ 81 阅读

相关如何利用CSS制作简易旋转木马效果

最近回顾动画知识的时候，看到了3d相关的知识，想到了当时学CSS 3动画的时候做的一个旋转木马还挺好看的，今天就来说说怎么用CSS3的变形（transform）和动画（anim

约定不等于承诺〃/ 2023年07月11日 08:58/ 0 赞/ 42 阅读

相关 css3+js 旋转木马轮播特效

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">

偏执的太偏执、/ 2022年12月13日 11:20/ 0 赞/ 235 阅读

相关使用css3实现图片旋转

用CSS语法实现动态旋转 css3新增的语法中有个动画属性，今天没事，拿来玩玩动画做成是这样的 ![在这里插入图片描述][watermark_type_ZmFu

系统管理员/ 2022年11月19日 09:59/ 0 赞/ 296 阅读

相关学习笔记——CSS 3D旋转木马实现

> 灵活运用CSS3中的transform属性，perspective属性以及transition属性实现旋转木马动画效果。 > > -----------------

r囧r小猫/ 2022年11月12日 13:59/ 0 赞/ 357 阅读

相关 css旋转木马案例

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAbGl1bGFuZzY4_size

分手后的思念是犯贱/ 2022年09月08日 00:30/ 0 赞/ 194 阅读

相关 css-图片旋转木马3D效果

参考博客：[ 张鑫旭][Link 1] 我们先来看一下效果： ![70][] 还不错咯，这个主要是利用了css3里面的transform属性。简单介绍一下。

淡淡的烟草味﹌/ 2022年05月24日 13:08/ 0 赞/ 372 阅读

相关利用CSS3实现图片3D旋转

以下是本次所作的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

古城微笑少年丶/ 2022年04月15日 01:08/ 0 赞/ 1060 阅读