2d运用 - 3d 视距

2024-04-30 10:51:47

transition

transition过度属性添加到需要过度的元素上
时间为必写属性 all默认值 ease由快到慢默认值 linear 匀速
delay 过度的延迟

2d平移

transform:translate
移位
只写一个值，x轴位移，正值向右，负值向左
写2个值，第1个是x轴位移，第2个是y轴，正值向下，负值向上
可以写百分比，参考是盒子自身宽高
注意：2d转换不脱标，还占据原来的位置

2d 旋转

transform:rotate (360deg);
rotate（度数deg）正值顺时针，负值逆时针

2d缩放 ,

放大transform:scale(2)
2d转换缩放，盒子里的所有内容都会跟着缩放，
只写一个值，是等比例缩放值>1放大值<1缩放
注意:不推荐写负值
写2个值，第1个是水平缩放，第2个值是垂直缩放

修改元素的基准点transform-origin
1.写2个方位值，left right center top bottom , 只写一个，另外一个值默认center
2.写数值，第1个值是距左边的距离，第2个值是距上边的距离，可以为负值

2d 倾斜

transform:skew(45deg,20deg)
倾斜第一个值是x轴，第2个是y轴

转换连写注意连写一般位移在前边
transform: 位移translate(500px) 旋转rotate(360deg)缩放 scale(2);

3d平移与视距

视距，眼睛距屏幕距离，有了视距，才有透视，添加到父元素上perspective：800px；3d位移的连写 translate3d(x轴，y轴，z轴)
transform: translate3d(100px, 100px, 200px);

3d 旋转

 x轴正值从下往上，负值反方向

transform: rotateX(-60deg);
y轴正值从左向右旋转负值反方向
transform: rotateY(60deg);
z轴正值顺时针，负值逆时针
transform: rotateZ(360deg);

transform 对行内元素无效

2d运用 - 3d 视距相关推荐

css3动画、2D与3D效果
1.兼容性 css3针对同一样式在不同浏览器的兼容需要在样式属性前加上内核前缀: 谷歌(chrome) -webkit-transition: Opera(欧鹏) -o-transition: ...
html笔记（五）2D、3D、3D动画
大标题小节一.2D 1. css3 渐变的语法及应用 2. 动画过渡:transition 3. 2D转换属性:transform 二.3D 1. 3D转换 2. 3D视距 3. 3D翻转方法 4 ...
375~407（2D+动画+3D+浏览器私有前缀）
4 2D转换转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果移动:translate 旋转:rotate 缩放:scale 4.1 二维坐标系 2D ...
CSS3动画（2D，3D，自定义动画）
文章目录 css3过渡动画 1 css3动画之2D 1.1 transition过渡动画基础 1.1.1 实现缓入缓出或快入快出效果 1.1.2 实现一秒内变换宽度 1.1.3 实现一秒后变换宽度 1 ...
AutoCAD 2D与3D大师班学习教程 AutoCAD 2D and 3D Masterclass
用实例和解决问题的方法完成从基础到专业的AutoCAD课程. 你会学到什么 AutoCAD课程包含创建计划和模型的命令和不同方法的详细使用. 本课程包括对AutoCAD中使用的所有命令和工具的详细解释 ...
C#和Unity游戏开发者大师班2021 (2D，3D和FPS)
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确) |大小:11.1 GB |时长:22h 31m 含项 ...
2D和3D机器视觉检测技术的优势和局限性
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|新机器视觉机器视觉一般由工业光源,图像采集单元,图像处理 ...
Deep Manta：单目图像下2d到3d由粗到精的多任务网络车辆分析
原文首发于微信公众号「3D视觉工坊」--Deep Manta:单目图像下2d到3d由粗到精的多任务网络车辆分析外文原文:Deep manta: A coarse-to-fine many-task ...
一文为你详解2D与3D人脸识别有什么区别?
最近业界内刮起了一股"人脸识别安全"的大讨论,小到个人大到超市以及银行,都在使用这个刷脸认证或支付,说它好吧,确实解决了无接触,快速高效等问题,你说它不好吧,也是有原因的,比如最明 ...

最新文章

热门文章