CSS3中3d转换与2d转换的区别（translate3d rotate3d）

最新推荐文章于 2022-12-23 13:13:28 发布
原创 最新推荐文章于 2022-12-23 13:13:28 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #2d与3d的区别

本文探讨了2D转换与3D转换的主要区别，强调了3D转换在移动端的性能优势，尤其是在具备3D加速引擎GPU的设备上，能够显著提升性能表现。

3d转换 translate3d rotate3d

2d转换和3d转换区别：

  1. 多了一个参数表示3d

  2. 在移动端使用3d转换可以优化性能（如果设备有3d加速引擎 GPU 可以提高性能 , 2d转换是无法调用GPU）

HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
lixiaosenlin的专栏
09-21 1万+
前面我们已经介绍过了2D转换，那么我们即将学习的3D转换又是什么呢，它跟2D转换有什么不同呢？ 在我们日常生活的环境就是3D的，我们多看到的物体也都是3D的，而我们拍的照片就是3D物体在2D平面中呈现的样子 。 3D的特点 近大远小（离我们眼睛越近看上去越大，而离眼睛越远则看上去越小） 物体后面遮挡不可见 根据这些特点我们就可以在网页上模拟构建出3D效果。 三维坐标系 我们前面讲过的2D是一个平面坐标系，而3D则是三维坐标系。三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴.
CSS之transform 2D 与 3D 转换（十五）
全粘小谭的博客
10-06 1208
该文主要讲解了围绕transform属性展开的2D转换，3D转换等一系列相关属性的用法及注意事项，字数较多，建议细嚼慢咽。
CSS3实践之路(五):2D和3D转换(transform)
11-17 253
.panal{ width:500px; border: 1px solid blue; height:200px; } .panal div{ border: 1px solid #6600ff ;width:120px; height:60px; background-color:#cc9900; } .tr{ transform: translate(80p...
2D转换与3D转换的区别
weixin_30911451的博客
09-09 433
2D与3D的区别——2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。 转载于:https://www.cnblogs.com/zhang-jiao/p/9612689.html
CSS3 2D转换&3D转换
江浙沪柯蓝
01-17 3765
1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 100px; height: 100px; background: #00ff21; transform: translate(100
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
Qlz的博客
12-22 6289
3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transform-style 7 3D案例 3D转换 我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。 3D特点： 近大远小。 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 1 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意
CSS3之3D转换
LQlove1的博客
12-23 1979
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。内容里有旋转木马的案例
CSS3之2D与3D变换的实现方法
12-13
CSS3的2D和3D变换为Web开发者提供了丰富的视觉效果和动态交互功能。2D变换主要涉及元素在二维平面上的位移、旋转、缩放、倾斜等操作，而3D变换则引入了第三个维度，使元素能够在视觉上呈现出立体效果。 在CSS3中，...
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
CSS3中的transform属性是前端开发中用于元素变形的常用工具，它不仅能够实现二维（2D）空间的变换，还能完成三维（3D）空间的变换效果。在进行介绍之前，我们先要了解transform属性的基本概念和其作用。 首先，...
HTML5CSS3（translate3d）
illion booked
05-27 1360
cHTML5 第三天 一、 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值 ​ 二、3D 转换 3D 转换知识要点 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 透视：perspctive 3D呈现 tran
2D旋转与3D转换
elktime的博客
08-17 1698
文章目录一、2D转换1.移动： translate2.旋转： rotate3.缩放： scale4.2D 转换综合写法以及顺序问题5.动画(animation)5.1.定义动画5.2.使用动画5.3.动画常见属性5.4.动画简写方式二、3D转换1.3D位移：translate3d(x, y, z)2.3D旋转：rotate3d(x, y, z)3.透视：perspctive4.3D呈现 transfrom-style 一、2D转换 2D转换是改变标签在二维平面上的位置和形状 1.移动： translat.
Css3——3D转换
weixin_45328723的博客
05-03 484
3D转换三维坐标系 三维坐标系其实就是指的立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：垂直个向下 注意：y下面是正值，上面是负值 z轴：垂直屏幕 注意：往外是正值，往里是负值 3D移动 translate3d 3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向 translform:translateX (100px):仅仅是在x轴上移动 translform:translateY (100px):仅仅是在y轴上移动 tra
CSS3-3D转换
weixin_49455047的博客
11-26 3051
目录 1.1三维坐标系 1.2 3D移动translate3d 1.3 透视perspective 1.4 3D旋转 rotate3d 1.5 3D呈现 transform-style 2.1两面翻转盒子案例 3D导航栏 旋转木马 有什么特点 近大远小 物体后面遮挡不可见 1.1三维坐标系 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：水平向下 注意：y下边是正值，上边是负值 z轴：垂直屏幕 注意：往外面是正值，往里面是负值 .
CSS3 3D移动（translate3d）、透视（perspective）、3D旋转（rotate3d）、3D呈现（transform-style）
蟹黄堡
05-16 6186
3D移动translate3d transform: translateX(100px)：仅仅是在X轴上移动 transform: translateY(100px)：仅仅是在Y轴上移动 transform: translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般都是用px单位） transform: translateX(100px) translateY(100px)：沿着X轴和Y轴同时移动 transform: translate3d(x,y,z)：在x，y，z轴上都
CSS3 transition 属性 translate3d rotate
blogscsdn的博客
08-17 4939
transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ 必须加上            div:hover
3D移动translate3d（CSS3）
...
08-15 305
3D移动translate3d（CSS3） <!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"&g
CSS3：3D移动translate3d及3D转换透视效果perspective
weixin_46682277的博客
01-09 795
3D移动translate3d 3D移动在2D移动的基础上多加了一个可以移动的方向，就是轴方向。 transform:translateX(100px);仅在x轴上移动。 transform:translateY(100px);仅在y轴上移动。 transform:translateZ(100px);仅在z轴上移动(单位一般都用px，不用百分比)。 transform:translate3d(x,y,z);其中x、y、z分别指要移动的轴的方向的距离。 .box1 { width: 200
CSS3 2D & 3D 转换 (transform)
m0_56212431的博客
09-23 285
1. 2D转换 1.1 移动 translate 类似于定位。可以改变元素在页面的位置。 语法：transform: translate(x,y) | translateX(n) | translateY(n) 注： translate定义移动时沿着X和Y轴移动元素。 通过该属性移动元素不会影响到其他元素的位置！！！ translate中的百分比单位是相对于自身元素的 translate:(50%,50%)。 该属性对行内标签没有效果 ...
css3（3D转换）快来一起学习吧
m0_68359121的博客
04-25 304
空间转换 属性：transform 可以实现平移、缩放、旋转（也叫3D转换） X、Y、Z轴方向的确认 X：沿着屏幕从左往右即是X轴正方向 Y：沿着屏幕从上往下即是Y轴正方向 Z：沿着屏幕从里往外即是Z轴正方向 左手法则：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向 视距（perspective） 属性：perspective 取值：像素单位数值， 数值一般在800 – 1200px 用法：为转换元素的父盒子添加，可达成近大远小 透视距离也称为视距，所谓
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值