2D转换和3D转换 transform

原创 已于 2022-08-18 20:37:29 修改 · 1.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #css

于 2022-08-13 15:17:35 首次发布
本文详细介绍了CSS中的转换技术，包括2D和3D转换的各种方法，如位移、缩放、旋转及如何设置变形原点等内容，并讲解了如何利用3D转换实现景深效果。

目录

一、转换的概念

二、2D转换

2.1 translate

2.2 scale

2.3 rotate

2.4 变形原点

三、3D转换 

3.1 景深

3.2 实现3d效果

3.3 3D位移

3.4 3D旋转

一、转换的概念

转换就是可以让元素进行位移，旋转，缩放等效果

二、2D转换

2.1 translate

2d位移,根据X轴和Y轴位置从当前元素位置移动,例：

transform: translate(-50%,-50%);

会让元素在x轴往左边位移自身宽度的50%，并且让元素在y轴上向上位移自身宽度的50% 

2.2 scale

缩放，默认为1不进行缩放，小于一时缩小，大于一变大，无论变大缩小，元素本身所占位置宽高不发生变化，例

transform: scale(3)

会使元素放大自身宽高的3倍 

2.3 rotate

旋转，当度数为正数时顺时针旋转，度数为负数时逆时针旋转，例

transform: rotate(90deg);

会使元素顺时针旋转90度

2.4 变形原点

transform-origin 

2d旋转默认是以元素中心，通过这个属性可以设置该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用，值例如“top left”、“right center”等等

例：

transform-origin：left bottom;

可以将变形原点设置到元素自身的左下点

三、3D转换 

3D相对于2D多了一条Z轴，靠近屏幕是正反向，远离屏幕是反方向

3.1 景深

perspective，可以实现近大远小，就像人的眼睛一样看远处小，近处大。

有2种写法：

在父元素使用：perspective: 1200px;

在元素本身使用：transform:perspective(1200px);

3.2 实现3d效果

transform-style：preserve-3d 

让元素的所有3D效果都显示，默认flat，让所有2D效果显示

3.3 3D位移

语法：transform:translate3d(x,y,z) 

也可以使用 【ransform:translateZ(t)】 对Z轴单独设置

像比2D，多了Z轴，当Z轴取值正数了，在正面位移，负数则往后面 

3.4 3D旋转

transform:rotateX()      设置元素围绕X轴旋转 

 transform:rotateY()     设置元素围绕Y轴旋转       

 transform:rotateZ()     设置元素围绕Z轴旋转

 transform:rotate3d(x,y,z,度数)   其中有3个参数4个参数，其中前3个分别代表xyz，当他们的值为1时第四个参数设置的度数生效，为0时不生效，

例

transform: rotate3d(1,0,1,90deg);

 这会让元素围绕x轴和z轴分别旋转90度，y轴没有任何动作

CSS之transform 2D 与 3D 转换（十五）
全粘小谭的博客
10-06 1203
该文主要讲解了围绕transform属性展开的2D转换，3D转换等一系列相关属性的用法及注意事项，字数较多，建议细嚼慢咽。
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x...
2D转3D算法
12-02
2D转3D算法，能够实现2D图像转成具有3D效果
一个2D转3D的方法
03-27
一个将图像2D转3D的算法
视频2d转3d工具
12-06
mediavatar 3d converter是一款功能非常实用的2D到3D的视频转换工具；软件的操作相当的简单，只要进入软件的界面，即可根据自己的需要来进行功能栏目的选择，还支持对语言的选择，而且每一个功能都拥有单独的界面，让您的使用灵活性得到大大的提高,转换的效率也比较的高，也对主流的视频格式进行转换，需要的朋友赶快这河东软件园将MediAvatar 3D Converter(2D转3D)下载来使用试试吧！
2D3D转换
DGL_优快云的博客
08-31 852
1 2D转换 转换是 CSS3 中具有颠覆性的⼀个特征，可以实现元素的位移、旋转、变形、缩放。 通过 transform 转换来实现 2D 转换或者 3D 转换。 2D转换包括： 缩放 移动 旋转 倾斜 1.1 scale 设置元素的缩放效果 语法： transform: scale(x, y); transform: scale(2, 0.5); 参数： x：表示水平方向的缩放倍数 y：表示垂直方向的缩放倍数 注
2D旋转与3D转换
elktime的博客
08-17 1689
文章目录一、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.
css-transform：CSS转换游乐场。 用于可视化2D和3D CSS3转换功能的在线工具
01-28
CSS3转换函数游乐场。 使用 ， 和构建的演示UI。 通过部署 发展历程 —安装 克隆或存储库并安装依赖项 $ git clone https://github.com/alterebro/css-transform.git $ cd css-transform/ $ npm install —服务 ...
CSS3 2D和3D转换(transform)
joshua
01-09 721
Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)等，利用Transform和javascript可以制作一些简单的动画，可以为web应用带来些意想不到的效果。 目前浏览器并不是完全支持所有的Transform ，IE9、Firefox 和Opera 仅支持2D transforms ，相应
ie-css-transform:您将 css 转换（2d 或 3d）和可选的转换原点值传递给的函数，它将尝试为 ie6 - ie8 模拟它
06-02
您将 css 转换（2d 或 3d）和可选的转换原点值传递给的函数，它将尝试为 ie6 - ie8 模拟它。 对于支持 css 转换的浏览器，它只会使用 css 转换属性。 IE 中支持的变换属性：所有 2d 和 3d 变换，但是 3d 旋转...
2D转换和3D转换
TKOP_的博客
12-21 839
2D转换和3D转换也是css3新增的重要内容。
论文翻译——Rapid 2D-to-3D conversion——快速2D到3D转换
YIOH的博客
05-03 4855
       目前想做一个关于2D转3D的项目，由于国内资料比较少而且大部分都是基于国外的研究资料优化而来，所以想翻译翻译国外的论文，强化自己的理解，同时方便他人，英文水平有限，尽量做到“信达雅”的信，争取下达，如有错误，希望大家指正。文末提供论文原文PDF下载。以下为正文。快速2D到3D转换摘要从现有2D图像到3D的转换已经被证明了是商业上可行的，并且满足了日益增长的对高质量立体影像的需求。当面...
基于单幅图像的2D转3D算法研究
热门推荐
Trent1985的专栏
11-07 1万+
最近，3D影片盛行，3D电视技术也层出不穷，3D技术在带给大家非凡的视觉冲击同时，也在告诉大家这背后隐藏了太多的商机。     目前的3D技术大体分为两种：软件技术和硬件技术。所谓硬件技术就是在拍摄影片时采用多摄像头及各种3D相关设备来拍摄片源；所谓软件技术就是将2D片源通过一定的软件转换为3D格式。     如何使用软件技术将2D转为3D呢？今天我们来研究一种基于单幅图像的3D转换算法。
2d转换 3D转换
weixin_68908760的博客
12-25 601
2d转换 3D转换
2D转3D技术概论
海燕
05-31 2396
3D技术能将真实世界中的事物以更加逼真的效果展现给人们。随着人们生活水平的日益提高，对3D效果的需求也越来越大，尤其在医学、影视娱乐等方面，3D技术的应用也层出不穷。然而，相比于3D显示的硬件设备来说，具有3D效果的资源数量明显不足。但是，现在已有非常丰富的2D资源。所以，将传统的2D资源转换为3D资源无疑能有效地解决3D资源匮乏的问题。现有的将2D转为3D主要有两大类主流的方法：一种是基于深度图
从二维到三维：全面解析2D转3D算法
最新发布
weixin_35797963的博客
08-19 1566
在计算机图形学和视觉领域，2D转3D算法是将二维图像数据转化为三维结构的关键技术。这种转换能够使得二维图像表现出立体的深度感，增强视觉体验，在电影制作、虚拟现实、3D打印及机器人视觉系统中有广泛应用。通过采集图像序列并分析其中的深度信息，可以构建起三维模型。该过程主要包括深度信息的获取、特征匹配、遮挡处理、噪声消除和细节恢复等步骤。深度信息可以通过多种方式获取，如特征匹配技术、光流分析和多视图几何方法等。
2D和3D的转换
weixin_64042638的博客
12-25 335
2D转换ranslatetranslateXtranslateY位移()rotate(3deg):旋转，单位degscale(宽，高)：扩大宽高n倍scaleX(只改变宽)scaleY(只改变高)skew(X,Y):倾斜，单位degskewX：X轴倾斜skewY:Y轴倾斜3D转换位移：transform:translateX(值);translateY(值);translateZ(值);
2D转3D
weixin_30748995的博客
09-07 550
1、想通过 摄像头/照相机之类的2D图片 转成 3D的图片，记录下： 　1.1、度娘"图片 还原 3D"：一种利用RGB图像还原3D场景的方法与流程.html（http://www.xjishu.com/zhuanli/55/201710621981.html） 　1.2、想到的 搜索关键字："2D 还原 3D" 2、 3、 4、 5、 转载于:https://www...
CSS_2D/3D转换
dolola的博客
01-31 274
transform:translate(50px,100px);左侧为X轴，顶部为y轴，根据给定的参数移动 transform: rotate(30deg); 旋转，正数为顺时针负数为逆时针 transform: scale(2,3); 缩放，第一个值为宽度的倍数，第二个值为高度的倍数 transform: skew(30deg,20deg);第一个值为水平的倾斜角度，正值向左，负值向右
用于CSS的2D3D转换
08-14
在 CSS 中，2D 和 3D 转换允许开发者以多种方式改变元素的形状、大小、位置和角度。这些功能通过 `transform` 属性实现，并且可以结合 `transition` 或 `animation` 创建动画效果。 ### 2D 转换 2D 转换是在二维平面上对元素进行操作，主要包括以下几种方式： - **移动（Translate）** 使用 `translate(x, y)` 可以将元素从当前位置在 X 和 Y 轴上移动指定的距离。例如： ```css transform: translate(50px, 100px); ``` 该代码将元素向右移动 50px，向下移动 100px [^5]。 - **旋转（Rotate）** 使用 `rotate(angle)` 可以让元素围绕其原点旋转指定的角度。例如： ```css transform: rotate(45deg); ``` 这将使元素顺时针旋转 45 度。 - **缩放（Scale）** 使用 `scale(sx, sy)` 可以按比例缩放元素的大小。其中 `sx` 是 X 轴的缩放比例，`sy` 是 Y 轴的缩放比例。例如： ```css transform: scale(1.5, 2); ``` 该代码将元素的宽度放大 1.5 倍，高度放大 2 倍。 - **倾斜（Skew）** 使用 `skew(ax, ay)` 可以让元素在 X 和 Y 轴上发生倾斜。例如： ```css transform: skew(30deg, 20deg); ``` 这将使元素在 X 轴上倾斜 30 度，在 Y 轴上倾斜 20 度。 - **变换原点（Transform Origin）** 使用 `transform-origin` 可以指定元素变换的原点。例如： ```css transform-origin: 10% 10%; ``` 这将使元素的变换原点设置为左上角的 10% 位置。 ### 3D 转换 3D 转换是在三维空间中对元素进行操作，比 2D 转换更加复杂和生动，包括以下主要功能： - **3D 移动（Translate3D）** 使用 `translate3d(x, y, z)` 可以在 X、Y 和 Z 轴方向上移动元素。例如： ```css transform: translate3d(100px, 100px, 50px); ``` 该代码将元素在 X 轴移动 100px，Y 轴移动 100px，Z 轴移动 50px [^2]。 - **透视（Perspective）** 使用 `perspective(n)` 可以定义 3D 转换元素的透视视图，数值越小，透视效果越明显。例如： ```css perspective: 600px; ``` 这会为元素创建一个 600px 的透视效果 [^2]。 - **3D 旋转（Rotate3D）** 使用 `rotate3d(x, y, z, angle)` 可以围绕指定的轴进行旋转。例如： ```css transform: rotate3d(1, 0, 0, 45deg); ``` 这将使元素围绕 X 轴旋转 45 度 [^4]。 - **3D 缩放（Scale3D）** 使用 `scale3d(sx, sy, sz)` 可以在 X、Y 和 Z 轴方向上进行缩放。例如： ```css transform: scale3d(2, 1.5, 1); ``` 该代码将元素的宽度放大 2 倍，高度放大 1.5 倍，Z 轴方向保持不变 [^4]。 ### 案例代码 以下是一个使用 `translate3d` 和 `perspective` 的简单示例： ```html <!DOCTYPE html> <html> <head> <style> .container { perspective: 600px; /* 设置透视距离 */ } .box { width: 100px; height: 100px; background-color: red; transform: translate3d(50px, 50px, 100px); /* 在三维空间中移动 */ } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> ``` ### 动画与转换结合 可以通过 `@keyframes` 定义动画，并将其应用到元素上。以下是一个简单的动画示例： ```css @keyframes example { from { transform: translate(0, 0); } to { transform: translate(100px, 200px); } } .animate { animation: example 2s infinite; } ``` 这个动画会不断将元素从原点移动到指定的位置。 ### 总结 通过 CSS 的 `transform` 属性，可以轻松实现 2D 和 3D 转换，从而创建丰富的视觉效果。这些转换可以与动画结合使用，以实现更复杂的交互效果。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

对卦卦上心

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

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

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

打赏作者

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

抵扣说明：

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

余额充值