移动Web的3D空间转换、动画效果

已于 2023-06-06 08:59:59 修改
阅读量582 收藏 3
点赞数 5
文章标签： 前端 3d html 动画
于 2022-10-06 10:55:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Moraxz/article/details/127180253
版权

一.3D空间转换

 1.绘制一个简单的3D立体小盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            transform-style: preserve-3d;
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 2s;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .box .one,
        .box .two {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .box .one {
            transform: translateZ(-100px);
            background-color: black;
        }

        .box .two {
            transform: translateZ(100px);
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

3D小盒子

2.3D导航栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 800px;
            margin: 200px auto;
            list-style: none;
        }

        .nav li {
            position: relative;
            float: left;
            margin-right: 20px;
            width: 120px;
            height: 50px;
        }

        .nav li a {
            /* 开启3D效果 */
            transform-style: preserve-3d;
            display: block;
            width: 120px;
            height: 50px;
            text-decoration: none;
            transition: all 1s;
        }

        .nav li a:hover {
            transform: rotateX(-90deg);
        }

        .nav a span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        .nav a span:first-child {
            background-color: green;
            /* 把绿色盒子放前面,前提条件开启了3D */
            transform: translateZ(25px);
        }

        .nav a span:last-child {
            background-color: orange;
            /* 橙色盒子垂直摆放,旋转90度,盒子翻转之后在前面盒子中间需要往上移动y轴向上移动25px就到了顶部 */
            transform: translateY(-25px) rotateX(90deg);
        }
    </style>
</head>
<body>
        <ul class="nav">
            <li>
                <a href="#">
                    <span>首页</span>
                    <span>index</span>
                </a>
            </li>
            <li>
            <a href="#">
                <span>首页</span>
                <span>index</span>
            </a>
            </li>
            <li>
            <a href="#">
                <span>首页</span>
                <span>index</span>
            </a>
            </li>
        </ul>
</body>
</html>

效果如图

这里需要注意提前开启3D效果:transform-style: preserve-3d; 

这里的思路是需要把绿色盒子放前面,橙色盒子垂直摆放,旋转90度,盒子翻转之后在前面盒子中间需要往上移动y轴向上移动25px就到了顶部

二.3D的动画效果

1.下面是一个简单的3D小球滚动一圈动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image: linear-gradient(black,aqua);
            animation: move 2s linear 0s infinite alternate;
        }

        @keyframes move {
            0% {
                transform: translate(0,0);
            }

            25% {
                transform: translate(800px,0) rotateZ(1turn);
            }

            50% {
                transform: translate(800px,400px) rotateZ(2turn);
            }

            75% {
                transform: translate(0,400px) rotateZ(3turn);
            }

            100% {
                transform: translate(0,0) rotateZ(4turn);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.剑客动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 140px;
            height: 140px;
            background: url(./images/bg.png) no-repeat;
            animation: run 0.5s steps(12) infinite,move 2s linear forwards;
        }

        /* 定义动画 */
        @keyframes run {

            /* 开始状态 */
            0%{
                background-position: 0 0;
            }

            /* 结束状态 */
            100%{
                background-position: -1680px 0;
            }
        }

        @keyframes move {
            0% {
                transform: translate(0,0);
            }

            100% {
                transform: translate(600px,0);
            }
        }


    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

它的思路是通过一个盒子装精灵图的一张图片来逐帧显示,叫做逐帧动画steps(数字)

3.通过CSS样式制作简易轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 150px;
            border: 10px solid #000;
            margin: 200px auto;
            overflow: hidden;
        }
 
        .box:hover .banner {
            /* 鼠标移入时暂停轮播图 */
            animation-play-state: paused;
        }

        .box .banner {
            width: 2000px;
            /* 调用动画 */
            /* linear为匀速运动
               infinite为无限循环 */
            animation: move 10s linear infinite;
        }

        .box img {
            cursor: pointer;
            float: left;
            width: 200px;
            height: 150px;
        }

        @keyframes move {
            0% {
                transform: translate(0,0);
            }

            100% {
                transform: translate(-1400px,0);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="banner">
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
            <img src="./images/4.jpg" alt="">
            <img src="./images/5.jpg" alt="">
            <img src="./images/6.jpg" alt="">
            <img src="./images/7.jpg" alt="">


            <!-- 解决留白问题 -->
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
        </div>
    </div>
</body>
</html>

后期制作轮播图主要还是靠学习js制作,这里面需要注意的是轮播图最后一个页面留白问题

解决方法,在最后留白的地方继续添加前面几张图片(根据轮播图每次最多展示宽度或者张数确定)

比如这个最后最多展示三张图片,所有需要cv前三张图片以保证在录播图循环问题上不会出现留白卡顿现象。

4.动画小案例(通过动画相关属性效仿360首页动画)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        .one img {
            position: absolute;
            left: 50%;
            top: 100px;
            z-index: 1;
            width: 254px;
            height: 254px;
            margin-left: -500px;
            animation: one 4s linear alternate infinite;
        }

        @keyframes one {
            0% {
                transform: translate(0,0);
            }

            50% {
                transform: translate(0,20px);
            }

            100% {
                transform: translate(0,0);
            }
        }

        .two img {
            position: absolute;
            left: 50%;
            top: 250px;
            z-index: 1;
            width: 430px;
            height: 430px;
            margin-left: 220px;
            animation: two 8s linear alternate infinite;
        }

        @keyframes two {
            0% {
                transform: translate(0,0);
            }

            50% {
                transform: translate(0,20px);
            }

            100% {
                transform: translate(0,0);
            }
        }

        .three img {
            position: absolute;
            left: 50%;
            top: 250px;
            z-index: 1;
            width: 100px;
            height: 100px;
            margin-left: 190px;
            animation: three 20s linear alternate infinite;
        }

        @keyframes three {
            0% {
                transform: translate(0,0);
            }

            50% {
                transform:rotateZ(-30deg);
            }

            100% {
                transform: translate(0,0);
            }
        }

        .four img {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 1500px;
            height: 700px;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="one">
        <img src="./素材图片/1.png" alt="">
    </div>

    <div class="two">
        <img src="./素材图片/2.png" alt="">
    </div>

    <div class="three">
        <img src="./素材图片/3.png" alt="">
    </div>

    <div class="four">
        <img src="./素材图片/4.jpg" alt="">
    </div>
</body>
</html>

最后如果你觉得对你有或多或少帮助的话希望能够给up点个赞是对我最大的鼓励,如果有需要改进的地方可以评论区留言,我会一一回复!!! 

程序员大臣
关注
移动web网页开发——3D转换
m0_45659764的博客
03-29 605
一、空间转换 空间：是从坐标轴角度定义的。x、y、和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同 空间转换也叫3D转换 属性：transform 1.1 空间位移 语法 transform:translate3d(x,y,z); transform:translateX(值); transform:translateY(值); transform:translateZ(值); 取值（正负均可） 像素单位数值 百分比 1.2 透视 使用perspecti...
移动web之3 D转换
LTiAmo5的博客
11-14 221
移动web之3 D转换
探索宇宙之美：Space-3D——浏览器中的3D空间场景生成器
gitblog_01011的博客
09-25 819
探索宇宙之美：Space-3D——浏览器中的3D空间场景生成器 space-3d Quickly generate procedural 3D space scenes in your browser with WebGL 项目地...
分享四个前端Web3D动画库在Threejs中使用的动画库以及优缺点附地址
左本Web3D
03-05 2399
GSAP是一个功能强大的JavaScript动画库，它可以用于创建各种类型的动画效果，包括缓动、时间轴、滚动效果、SVG动画、CSS动画等等。：Anime.js是一个轻量级的JavaScript动画库，它可以用于创建复杂的动画效果，包括缓动、时间轴、颜色动画、路径动画等等。：Popmotion是一个强大的JavaScript动画库，它可以用于创建各种类型的动画效果，包括缓动、物理动画、路径动画等等。GSAP是一个功能强大的JavaScript动画库，支持多种类型的动画效果，可以创建各种复杂的动画效果。
手机三维模型产品Web3D可视化vr线上展示
weixin_48262930的博客
03-12 814
在互联网时代不断的发展下，三维建模技术和电子产品线上展示进一步升级融合，以一种全新的三维效果图的展示技术，高度还原现实场景的手机模型，有效提高手机模型的发展。商迪3D通过Web3D可视化三维效果构建出3D手机模型线上展示，通过建模技术对手机的外观结构进行建模和渲染、360度/720度旋转、缩放、交互体验等三维效果模拟。Web3D可视化产品三维效果图被广泛应用于电商产品、互联网等线上展示。三维效果图产品3D手机模型线上展示满足客户很多需求，全方面展示手机模型以及内容，客户可以进行点击观看，全方位了解手机的资料
2020-11-20 web3D转换
qq_45659634的博客
11-20 226
web 3D转换 1.旋转 rotate （1） transform:rotateX(旋转角度 deg为单位); // 绕X轴 （2） transform:rotateY(旋转角度 deg为单位); // 绕Y轴 （3） transform:rotateZ(旋转角度 deg为单位); // 绕Z轴 （4） transform:rotate3d（X，Y，Z deg为单位); //综合 2.perspective //透视效果 3. transform-style //规定被嵌套元素如何在3D
移动web 第二天空间转换、动画
12-25
移动Web 第二天空间转换、动画是指在移动Web 开发中使用CSS实现的空间转换和动画效果。本章节将讲解空间转换、动画的基本概念和实现方法。 一、空间转换 空间转换是指元素在三维空间中的位移、旋转、缩放等效果。...
移动Web开发中的CSS变换与动画技术详解
最新发布
11-04
还包括了如何利用变换函数来创建居中布局以及如何调整元素转换的原点，进一步讲解了线性和径向渐变的实现方法，探讨了在三维空间下的转化，如translate3d、rotateX/Y/Z等函数的应用，最后阐述了CSS3中的动画概念，...
web3D构建三维房间空间（three.js）
12-04
本项目以"web3D构建三维房间空间（three.js）"为主题，利用JavaScript库three.js实现了从二维平面图到三维空间的转换，让用户能够互动地查看、操作虚拟房间。 首先，我们需要理解Web3D的基本概念。Web3D是一种在...
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局
qq_48687155的博客
07-28 398
移动Web网页开发：2D&3D转换与动画、移动端布局、响应式布局
html5制作visa信用卡3D立体动画效果源码
11-05
这些变换可以组合在一起，创造出复杂的3D效果。同时，CSS3的transition和animation属性则负责实现平滑的过渡和动画效果。 Visa信用卡的3D立体动画效果通常会包含以下步骤： 1. **创建HTML结构**：首先，需要建立一...
三维动画Web算命程序
12-01
一个三维动画算命程序，只是为了好玩。第一次运行可能需要从微软网站自动下载和安装Silverlight运行环境。该环境提供Silverlight极好的用户体验。 仅仅用于娱乐，版权所有，不得传播。
给你10款WEB网页动画效果(源代码)
01-09
推荐10款CSS3动画.zip CSS3倒计时时钟动画 CSS3多样式小图标按钮 带分享按钮 jQuery缩略图动态缩放焦点图 jQuery图片左右水平滚动插件 Metro扁平化风格的jQuery UI组件 纯CSS3 3D浮动按钮 纯CSS3实现自行车动画特效 基于Bootstrap的CSS3下拉菜单 菜单3D立体效果 书本翻页动画特效 纵向分类下拉菜单导航 ...
web前端 2D 3D 动画小记（让网页栩栩如生的秘密）
敏敏的博
12-02 1262
前端实现3D动画效果，让你的网页栩栩如生~
web动画效果的呈现
Tai_hua的博客
12-14 601
过渡：就是指元素从一个状态变为另一个状态的过程。通过transition属性来指定。 它的语法格式为： 1.transition:过渡属性，持续时间，运动曲线，延迟时间。 2.transition-property：指定要用于过渡的属性名称，如：width、height、background、...... 3.transition-duration：过渡持续时间，单位是秒。 4.transition-timing-function：过渡的的运行曲线，默认是ease。 5.transit...
移动web( 3D效果空间转换 动画)
Hw111520的博客
07-18 243
移动web基础篇二(3D空间转换 动画效果)
【web前端开发 | CSS3】3D转换
小赵不忙的博客
11-16 332
3D转换
前端与移动开发----移动web开发----CSS高级部分（2D转换，3D转换）
東三城的博客
11-06 305
CSS高级部分 ☞核心知识点 1. 2D转化及相关属性【重要】[复合属性: 由多个属性组成] 2. 3D转化及相关属性【重要】[复合属性] ☞2D转化[复合属性] 1. 2D转化能够让我们干什么？ ◇2D转化可以让我们改变元素位置【位移】 ◇2D转化可以让页面中的元素旋转【旋转】 ◇2D转化可以改变页面中元素的大小【缩放】 2. 2D转化位移 语法： transform: translate(x, y); 备注： x 代表元素在水平方向的位移 y 代表元素在垂直方向的位移 例如：
产品web3d效果动态展示更生动形象
VRARvrnew3d的博客
08-09 1032
web 3d的优势在于整个体验非常的轻量化，并且内容可以嵌入所有的web渠道，比如官网，微信，小程序，商城等等。非常便于传播。
移动Web空间转换与动画技巧详解
移动Web空间转换与动画是现代网页设计中不可或缺的组成部分，尤其在响应式设计和提升用户体验方面具有重要意义。本篇文章将深入探讨这两个关键知识点。 首先，空间转换，也被称为三维转换，是通过CSS `transform` ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员大臣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值