3D效果和动画效果

最新推荐文章于 2022-12-12 11:08:29 发布
最新推荐文章于 2022-12-12 11:08:29 发布
阅读量286 收藏
点赞数
文章标签： 3d 动画 css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BenHandsome1/article/details/125238692
版权
本文详细介绍了如何使用CSS3实现3D效果，包括translateZ、X Y Z轴旋转、transform:scale缩放以及3D旋转的运用。同时，文章还探讨了动画效果的基础使用，讲解了如何创建和应用动画，以及动画与过渡效果的区别，并通过轮播图示例展示了动画效果的实际应用。
摘要由CSDN通过智能技术生成

1. 3d效果

1.1 translateZ(数值px)

透视: perspective 800-1200px 数值   可以看出 translateZ 的动态  

过度: transition all 1s  显示效果 1秒 让效果不那么突兀, 配合hover效果

对自己视聚位移120px transform: translateZ(120px);

图片的大小不会改变.

     <style>
        body {
            perspective: 900px;
        }
        .box {
            width: 400px;
            height: 400px;
            margin: 200px auto;
            background-color: yellowgreen;
            transition: all 1s;
        }

        .box:hover {
            transform: translateZ(120px);
        }

    </style>


    <body>
        <div class="box"></div>
    </body>

1.2   X Y Z 轴

左手原则

不会做图片,下次改进哈.

X轴:  向右旋转 正值  向左旋转 负值  同理右移动正值  左移动负值

Y轴:  向下旋转 正值  向上旋转 负值  同理下移动正值  上移动负值

Z轴:  向自己的视距移动正值(变大)  这个解释比较难  配合透视: perspective 800-1200px 建议取值800px到1200px

         .box {
            width: 400px;
            height: 400px;
            background-color: red;
            /*  200px  上外边距  auto 水平居中 */
            margin: 200px auto;
            /* 过度  10秒 */
            transition: all 10s;
            
          }
          .box img {
            width: 100%;
            height: 100%;
            
          }

        .box:hover{

            /* transform: rotateX(1turn); */
            /* Y轴正方位旋转1圈 向右旋转 */
            transform: rotateY(1turn);
        }

      <div class="box">
        <img src="../img/2.jpg">
    </div>

1.3 transform:scale  缩放

scale(1) 取值 1 一倍(就是原本的模样) 

scale(0.5) 缩小0.5倍

记得配 溢出隐藏哦!  overflow: hidden

        .box {
            width: 400px;
            height: 400px;
            margin: 200px auto;
            overflow: hidden;
        }
        .box img {
            width: 100%;
            height: 100%;
            transition: all 5s;
        }
        .box:hover img{
            transform: scale(1.2);
        }



    <div class="box">
        <img src="../img/1.jpg">
    </div>

1.4 3D旋转

打开3d效果  在3d盒子的上级配置 transform-style:preserve-3d

详解如图:

    <style>
        .box {
            /* 相对定位 */
            p
最低0.47元/天 解锁文章
Ben 吼吼吼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3D动画效果实现步骤
lcj529的博客
09-11 665
3D动画效果实现步骤 3D呈现（transform-style） 3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下： transform-style: preserve-3d; //让 子盒子 位于三维空间里 transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化） 案例： html部分 <body&gt
关于3D动画效果
weixin_44548147的博客
02-02 296
​ 如果我们想利用CSS来构建3D效果，那么我们要自已了解关于3D的属性，在这里我只用了perspective（设置元素被查看位置的视图或者可以理解为眼睛到屏幕的距离），transform-style（规定如何在 3D 空间中呈现被嵌套的元素），transform-origin（设置旋转元素的基点位置），transform（属性向元素应用 2D 或 3D 转换）。 我们可以试想把一个正方体剪切...
perspective 3D 效果和动画配合
youyudehan的博客
12-12 302
perspective 3D 效果和动画配合 实现 3D 轮播图
3d动画 android,绅士动画 – 【安卓+PC】【3D动画】Oreo大师神级新作
weixin_30646903的博客
05-25 2万+
实际内容比预览图画质更好，哥布林警告，之前非动画作品是4K每日报：Switch模拟器Yuzu现已成功模拟《动物森友会》上个月，Switch模拟器Ryujinx就已经成功运行《动物森友会》，现在又一款Switch模拟器Yuzu成功模拟《动物森友会》，所以PC玩家也能玩到这款游戏了。具体方法流程：1.更新到Yuzu模拟器抢先体验最新版本2.安装任意版本的《动物森友会》更新档。这个时候游戏还不能启动。3...
CSS3变形透视动画总结
chen__cheng的博客
05-09 930
CSS3变形透视动画总结1. 总览2. 移动元素2.1 平面移动2.2 Z轴方向移动2.3 XYZ轴同时控制3. 缩放元素3.1 元素变形原点4. 旋转元素5. 倾斜元素6. 透视6.1 什么是透视？6.2 CSS3实现透视6.3 3d透视6.4 透视方位7. 隐藏元素背面 1. 总览 使用transform规则可以控制元素的变形透视动画操作，包括控制移动、旋转、倾斜、3D转换等。 属性值 属性值 说明 none 定义不进行转换。 translate(x,y) 定义 2D 转换。 t
CSS之transform 2D 与 3D 转换（十五）
全粘小谭的博客
10-06 963
该文主要讲解了围绕transform属性展开的2D转换，3D转换等一系列相关属性的用法及注意事项，字数较多，建议细嚼慢咽。
CSS——景深perspective属性
qq_41625074的博客
03-08 3017
学习了css的3D动画属性和过渡属性后，我们已经可以用它来实现一些动画效果了，比如实现一个正方体。但是当我们实现了这个效果后会发现一个问题，就是我们能看到的面的大小都是一样的。事实上，它每个面的大小确实是一样大的，但是结合现实生活，我们会发现这样一个现象——相同大小的物体，假设它摆在我们眼睛的正前方，我们所能感知到它的大小也是会随着它离我们的距离而改变的。离我们越近，我们感知上感觉它越大，越远越小...
3D动画animation
yh_31的博客
06-21 2万+
3D
【CSS】transform 属性详解
JoeyLee的博客
08-16 1560
transform 属性的值 translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z) 定义位置的移动距离 scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz) 定义元素的缩放比例 rotate(angle)、rotateX(angle)、ro...
运用css3 实现骰子3d旋转效果
小菜鸟的博客
05-04 6774
css部分代码： .dice_box { width: 400px; height: 400px; position:relative; margin:0 auto; perspective: 900px; -moz-perspective: 900px; -webkit-perspective: 900px; perspective-origin: 50%, 50%; -m
css3系列之详解perspective
lyp597634636的博客
02-01 886
css3系列之详解perspective perspective 简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕800px 的地方观看这个元素。(这个属性，要设置在父元素上面) (这个属性呢，有着很冷门的知识请认真看完呢) 先来看看， 加了perspective 和 没有加是什么区别， 第...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
weixin_41325924的博客
10-12 1247
1.2D转换之移动translate （1）transform:translate(x,y); transform:translate(100px,100px); （2）transform:translateX(n); transform:translateX(500px); （3）transform:translateY(n); transform:translateY(500px); div{ width: 200px; height: 200px; backgrou
一文搞懂CSS 3D动画效果
一个非常Cool的人
01-29 7157
本文主要介绍了CSS 动画效果,不用js也可以实现。主要包括旋转、定位、透视。还有几个项目案例，欢迎大家阅读学习，如有不足请批评指正。
transform: rotate(1turn)
想好了再写！
04-25 1166
transform: rotate(1turn) 以前我也从没写过1turn，但是直觉告诉我这肯定是转一圈的意思 1 turn 相当于1圈，就是360deg; 90deg就是0.25turn; transform: rotate(1turn)；等价于 transform: rotate(360deg); @keyframesloading { to { transform: rotate(1turn); }
基于three.js的3D粒子动效实现
weixin_34067102的博客
04-08 936
作者：个推web前端开发工程师 梁神 一、背景 粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器、脚本来控制其整体或单个的运动，模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js实现粒...
WPF-3D动效-文字球形环绕
DuelCode的博客
08-17 2251
费劲写了一个动效，却要被砍掉，心碎.... private List&lt;Point3D&gt; GetBuckyBallPoints() { List&lt;Point3D&gt; ltPoints = new List&lt;Point3D&gt;(); ltPoints.Add(new Point3D(.85065...
css3中的transform中的3d变换：translatez()与transform-origin-z()的区别
kbx8916的博客
03-27 8567
3d变换中的移动，z中的正方向面向用户,值越大，越靠近用户。 translatez（100px）离用户更近了。 transform-origin-z中z轴的正方向向内，即值越大，离用户越远。与translatez刚好相反。 默认：transform-origin:50% 50% 0px;
Android 3D旋转动画效果
热门推荐
永远即等待的专栏
06-19 2万+
这篇文章主要介绍一下如何实现View的3D旋转效果，实现的主要原理就是围绕Y轴旋转，同时在Z轴方面上有一个深入的缩放。 演示的demo主要有以下几个重点： 1，自定义旋转动画 2，动画做完后，重置ImageView 先看一下程序的运行效果： 1，自定义动画类 这里实现了一个Rotate3dAnimation的类，它扩展了Animation类，重写applyTra
8款效果惊艳的HTML5 3D动画
yanyiping992的博客
10-16 4468
HTML5凭借着其强大的3D渲染能力，让很多开发者都跃跃欲试，都想亲自体验一下HTML5的3D效果。今天本文就分享8款效果惊艳的HTML5 3D动画，您可以捡现成的看看，顺便也可以学习学习HTML5的相关知识。1、HTML5 WebGL水面水波荡漾特效之前已经向各位分享过一款很逼真的HTML5水波荡漾特效，效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画，画面上是一个大水池，水池底部...
UI动画怎么实现3d效果
最新发布
06-01
要实现3D效果的UI动画，您可以使用Unity中的一些内置组件和技术，如： 1. Canvas和UI元素：在Unity中创建一个Canvas，并将UI元素添加到Canvas中。您可以使用UI元素的位置、旋转和缩放属性来创建3D效果。 2. 动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值