css3D动画知识点，css3+js实现立方体照片墙以及鼠标拖动旋转及呼吸灯效果案例

最新推荐文章于 2024-06-22 16:15:18 发布
最新推荐文章于 2024-06-22 16:15:18 发布
阅读量464 收藏 3
点赞数
分类专栏： 日常所遇 文章标签： css3 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WYWEBGO/article/details/107682305
版权 
        1. perspective设置透视点，可以设置为任意值，但通常推荐设置为600-1000之间
        2.位移（translate）
            transform: translateX(n)
            让元素沿着x轴移动
                设置正数: 从左向右
                设置负数: 从右向左
            transform: translateY(n)
            让元素沿着Y轴移动
                设置正数: 从上向下
                设置负数: 从下向上
            transform: translateZ(n) - 新效果 配合perspective使用
            让元素沿着Z轴移动
                设置正数: 朝向我们视线移动(靠近我们)
                设置负数: 背向移动(远离我们)
        3. 旋转（rotate）
            rotateX(angle)
                方向判断利用左手原则
            rotateY(angle)
                方向判断利用左手原则
            rotateZ(angle)
                方向判断利用左手原则
        4.缩放（scale）
            scaleX()
                沿着x轴放大或缩小
            scaleY()
                沿着y轴放大或缩小
            scaleZ()
                沿着Z轴放到或缩小
        5.倾斜（skew）
            skewX()
                沿着x轴倾斜，x轴方向的两条边平行
            skewY()
                沿着y轴倾斜，y轴方向的两条边平行
        6.子元素保留3D转换
            transform-style: flat；
            transform-style: preserve-3d;
            flat 不保留3d转换，默认值
            preserve-3d; 子元素保留3d转换，如果不设置这个属性，内部元素不会存在3D的遮挡关系(伪3D)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            /* 设置透视点 */
            perspective: 1000px;
        }

        #cube {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            /* 保留3D效果 */
            transform-style: preserve-3d;
            /* transition: all 1s linear; */
        }

        .page {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            /* 设置透明度 */
            opacity: 0.6;
            box-shadow: 0 0 10px rgb(100, 99, 99);

        }

        /* .cube:hover {
            transform: rotate3d(20, 0, 0, 360deg);
        } */

        .nood_front {
            background: no-repeat url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596018188816&di=be74054e8c2d9d315128036c1a802b38&imgtype=0&src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft0118a91e715c7643a5.jpg%3Fsize%3D580x385');
            background-size: 100% 100%;
            transform: translateZ(100px);
            animation:nood_front 1s infinite linear alternate;
        }

        .nood_back {
            background: no-repeat url('https://img.solves.com.cn/p/2019/07-03/1785c0c80d7fd2512c01f344e6855b6b.jpg');
            background-size: 100% 100%;
            transform: translateZ(-100px) rotateY(180deg);
            animation:nood_back 1s infinite linear alternate;
        }

        .nood_left {
            background: no-repeat url('http://static.oschina.net/uploads/img/201403/25072156_eWdU.jpg');
            background-size: 100% 100%;
            transform: translateX(-100px) rotateY(90deg);
            animation:nood_left 1s infinite linear alternate;
        }

        .nood_right {
            background: no-repeat url('https://www.seoxiehui.cn/data/attachment/portal/201805/30/132252x1q5fjm3s3nn3j4u.jpg');
            background-size: 100% 100%;
            transform: translateX(100px) rotateY(-90deg);
            animation:nood_right 1s infinite linear alternate;
        }

        .nood_top {
            background: no-repeat url('https://bkimg.cdn.bcebos.com/pic/4afbfbedab64034f29596c8ba6c379310b551da2?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg');
            background-size: 100% 100%;
            transform: translateY(-100px) rotateX(90deg);
            animation:nood_top 1s infinite linear alternate;
        }

        .nood_bottom {
            background: no-repeat url('https://img.solves.com.cn/p/2019/07-03/10b42b891b5bb368c7e814fdf3c741bc.jpg');
            background-size: 100% 100%;
            transform: translateY(100px) rotateX(-90deg);
            animation:nood_bottom 1s infinite linear alternate;
        }


        @keyframes nood_front {
            from {
                transform: translateZ(100px);
            }
            to {
                transform: translateZ(200px);
            }
        }

        @keyframes nood_back {
            from {
                transform: translateZ(-100px) rotateY(180deg);
            }
            to {
                transform: translateZ(-200px) rotateY(180deg);
            }
        }

        @keyframes nood_left {
            from {
                transform: translateX(-100px) rotateY(90deg);
            }
            to {
                transform: translateX(-200px) rotateY(90deg);
            }
        }

        @keyframes nood_right {
            from {
                transform: translateX(100px) rotateY(-90deg);
            }
            to {
                transform: translateX(200px) rotateY(-90deg);
            }
        }

        @keyframes nood_top {
            from {
                transform: translateY(-100px) rotateX(90deg);
            }
            to {
                transform: translateY(-200px) rotateX(90deg);
            }
        }

        @keyframes nood_bottom {
            from {
                transform: translateY(100px) rotateX(-90deg);
            }
            to {
                transform: translateY(200px) rotateX(-90deg);
            }
        }
    </style>
</head> 

<body>
    <!-- <p>
            1. perspective设置透视点，可以设置为任意值，但通常推荐设置为600-1000之间
            2.位移（translate）
                transform: translateX(n)
                让元素沿着x轴移动
                    设置正数: 从左向右
                    设置负数: 从右向左
                transform: translateY(n)
                让元素沿着Y轴移动
                    设置正数: 从上向下
                    设置负数: 从下向上
                transform: translateZ(n) - 新效果 配合perspective使用
                    让元素沿着Z轴移动
                        设置正数: 朝向我们视线移动(靠近我们)
                        设置负数: 背向移动(远离我们)
            3. 旋转（rotate）
                rotateX(angle)
                    方向判断利用左手原则
                rotateY(angle)
                    方向判断利用左手原则
                rotateZ(angle)
                    方向判断利用左手原则
            4.缩放（scale）
                scaleX()
                    沿着x轴放大或缩小
                scaleY()
                    沿着y轴放大或缩小
                scaleZ()
                    沿着Z轴放到或缩小
            5.倾斜（skew）
                skewX()
                    沿着x轴倾斜，x轴方向的两条边平行
                skewY()
                    沿着y轴倾斜，y轴方向的两条边平行
            6.子元素保留3D转换
                transform-style: flat；
                transform-style: preserve-3d;
                flat 不保留3d转换，默认值
                preserve-3d; 子元素保留3d转换，如果不设置这个属性，内部元素不会存在3D的遮挡关系(伪3D)
    </p> -->

    <div id="cube">
        <div class="page nood_front"></div>
        <div class="page nood_back"></div>
        <div class="page nood_left"></div>
        <div class="page nood_right"></div>
        <div class="page nood_top"></div>
        <div class="page nood_bottom"></div>
    </div>
</body>
<script>
    document.onmousedown = function (event) {
        var that = document.getElementById('cube');
        var reg = /\-?[0-9]+\.?[0-9]*/g;
        var bf = that.style.transform || '0,0';
        var arr = bf.match(reg);
        var bfX = Number(arr[0]);
        var bfY = Number(arr[1]);
        var startX = event.pageX;
        var startY = event.pageY;
        document.onmousemove = function (event) {
            var disX = event.pageX - startX;
            var disY = event.pageY - startY;
            var y = (disX + bfY) % 360;
            var x = -(disY + bfX) % 360;
            that.style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(0deg)";
        };

        document.onmouseup = function (event) {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
</script>

</html>
WYWEBGO
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css动画--呼吸灯
刘鹏的个人博客
08-07 249
本作品有瑕疵，以后时间在修改！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li{ border: 0; ...
css3 transform及原生js实现鼠标拖动3D立方体旋转
09-24
主要为大家详细介绍了css3 transform及原生js实现鼠标拖动3D立方体旋转的相关资料，感兴趣的小伙伴们可以参考一下
浪漫程序员会表白之抖音旋转立方体照片墙
01-08
在继上一次写了抖音上的时钟屏保，被我改造完用来表白后，有个兄弟给我评论，下一篇《淘宝上超火的水晶发光相册，被我买来用于表白》，恰好我之前写过这个小demo，于是我忙里偷闲把这个小demo的博客写了出来。 写在前面，源代码传到github上，在最下面，大家自行下载 这个小demo使用的是html + css3 + javascript实现，主要目的是锻炼我的编（撩）程（妹）技（能）术（力）！ 闲言少许，书归正文，先看看效果图吧，还是因为csdn上只能上传5M的图，所以只能降帧做gif啦 上次写的小demo，还有兄弟希望适配一下移动端，所以我简单的使用媒体查询+JavaScript，适配了下移动
HTML网页圣诞倒计时主题3D旋转相册源码
12-13
整个页面分为四个部分： Page1:圣诞节倒计时效果 Page2:3D立方体旋转相册 Page3:3D旋转照片墙 Page4:圣诞贺卡 页面整体具有3D飘雪效果，两种翻页按钮均支持上下滑动翻页，操作方便效果酷炫 页面中倒计时时间、音乐及照片均支持自定义更换，音乐存放在项目的audio文件夹下 Page2：照片存放在项目的images图片文件夹下，小立方体的照片大小为100*100像素，大立方体的照片尺寸为396*400像素 Page3：照片存放在项目的imagess图片文件夹下，照片尺寸为1280*1024像素 Page4:页面中的文字可在源码页面中对应位置修改 备注：网页中多处引用了外部字体文件加载比较慢，请等待加载结束后再查看完整的网页效果。这里说明的照片尺寸仅供参考，具体尺寸请以特效中的实际照片大小为准
Filament绘制立方体
12-22
本资源基于Filament实现了绘制立方体，效果详见博客→https://zhyan8.blog.csdn.net/article/details/135161694
旋转立方体
12-03
旋转立方体，刚开始学，做的不是很好，也可能有些地方做的不是很好，各位凑合看
3D旋转相册
qq_45879198的博客
08-18 261
文章目录前言一、3D旋转相册演示二、3D旋转相册源代码三、所需要的文件 前言 利用html css 写的一个简单的3D旋转相册 提示：以下是本篇文章正文内容，下面案例可供参考 一、3D旋转相册演示 二、3D旋转相册源代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
css呼吸效果实现
zhoupenghui168的博客
11-09 1166
css呼吸效果实现，使用animation， transform: scale实现一个呼吸效果
css 动画 呼吸 呼吸灯 效果
祖先生的博客
04-01 3827
.yellow { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #FFB22B; margin-right: 4px; } .yellow::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:.
CSS3特效 - 会呼吸的button按钮
草巾冒小子的博客
10-17 9105
动画过度都很流畅。这里以gif为模拟效果。 1. 效果图 2. 代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3特效 - 会呼吸的button按钮&lt;/title&gt; &lt;style type="text/
微信小程序学习笔记 flex布局2
weixin_34198453的博客
12-14 233
flex 属性加上之后 padding 依然会撑大盒子,使用 box-sizing: border-box 可以不改变原来盒子的大小 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" co
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
11-22
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。 实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动...
jQuery+CSS3实现3D立方体旋转效果
10-23
主要介绍了jQuery结合CSS3来制作3D立方体旋转效果，切换图片时呈现3D立体图片画廊特效，需要的朋友可以参考下
情人节浪漫3D照片墙【附源码】_图片墙 源码，整理出这份8万字大数据开发性能优化实战解析
2401_84150302的博客
04-18 415
【代码】情人节浪漫3D照片墙【附源码】_图片墙 源码，整理出这份8万字大数据开发性能优化实战解析。
抖音上很火的3D立体动态相册实现代码!
木贝西的博客
11-29 9930
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>酷炫3d</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> &lt...
css3-呼吸灯
weixin_47775987的博客
02-14 289
.box{ width: 200px; height: 200px; background-color: rgb(255, 129, 228); border-radius: 50%; opacity: 0.1; overflow: hidden; margin: 25% auto; -webkit-a...
three css3D模式,(Three.js) 页面展现3D模型
weixin_42393245的博客
08-03 883
CSS3的3d-Transform，Canvas，SVG，WebGL等等技术的出现和发展，正将网页的3D化慢慢变得简单友好，但是3D建模毕竟有其很高的专业性，所以如果拥有一个内心强大，接口简洁的库就能使我们得心应手许多。Three.js便是备受推崇的一个，尽管API的变动，简陋的文档会让我们的上手比较困难。下面我提供一个入门Demo，及一个用Three.js展示通用的3D模型格式的Demo。(注意...
three.js 实现全景图360°
xiao_a_gang的博客
08-16 6697
&lt;!DOCTYPE html&gt; &lt;!-- saved from url=(0048)https://threejs.org/examples/css3d_panorama.html --&gt; &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
探索CSS3多媒体查询：响应式设计的魔法钥匙
最新发布
艾恩小灰灰的博客
06-22 432
CSS3多媒体查询是响应式设计的基石，它不仅让网页能够智能适应各种设备环境，还极大提高了用户体验。通过灵活运用多媒体查询，开发者能够创造出既美观又实用的跨平台网页设计。掌握这一技术，是每位前端开发者通往高质量网页设计之路的必经之途。随着技术的不断进步，多媒体查询的应用场景将会更加丰富多样，为响应式设计开辟更多可能。
ios上css实现3d立方体旋转
05-18
在iOS上使用CSS实现3D立方体旋转可以通过使用CSS3的transform属性和perspective属性来实现。以下是一个简单的例子： HTML代码： ``` <div class="cube"> <div class="side">1</div> <div class="side">2</div> <div class="side">3</div> <div class="side">4</div> <div class="side">5</div> <div class="side">6</div> </div> ``` CSS代码： ``` .cube { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; transition: transform 1s; perspective: 800px; } .side { position: absolute; width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 48px; color: white; background: black; opacity: 0.8; border: 2px solid white; } .side:nth-child(1) { transform: rotateY(0deg) translateZ(50px); } .side:nth-child(2) { transform: rotateY(90deg) translateZ(50px); } .side:nth-child(3) { transform: rotateY(180deg) translateZ(50px); } .side:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); } .side:nth-child(5) { transform: rotateX(90deg) translateZ(50px); } .side:nth-child(6) { transform: rotateX(-90deg) translateZ(50px); } .cube:hover { transform: rotateX(360deg) rotateY(360deg); } ``` 在这个例子中，我们使用了一个包含6个面的div元素，并使用transform属性将其转换为3D立方体。然后，我们使用nth-child选择器来为每个面设置不同的旋转角度。最后，我们使用hover伪类选择器来实现鼠标悬停时的动画效果。 注意：该代码只能在支持CSS3的浏览器上运行，如Chrome、Safari等。在移动端设备上也可以使用该代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值