CSS3中的2D和3D转换知识介绍

2024-04-08 15:17:03

一 2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；

2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；

4、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；

5、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜

二 3D转换

1、3D坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。如下图

2、左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

3、左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。

三动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、必要元素：

a、通过@keyframes指定动画序列；

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度，linear、ease等

e、animation-play-state动画播放状态，play、paused等

f、animation-direction动画逆播，alternate等

g、animation-fill-mode动画执行完毕后状态，forwards、backwards等

h、animation-iteration-count动画执行次数，inifinate等

转载于:https://www.cnblogs.com/lsy0403/p/5868429.html

CSS3中的2D和3D转换知识介绍相关推荐

css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
html 结合3d效果,HTML和CSS3中的2D、3D结合实现动画效果
这篇文章给大家介绍的内容是关于HTML和CSS3中的2D.3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 虽然我们我们在前端工作中,对于2D.3D动画效果一般来说 ...
CSS3之2D与3D转换
在CSS3中新增了很多关于2D和3D转换的标准,它允许将页面元素在2D和3D空间内进行移动.缩放.旋转.倾斜等.所谓的2D转换,指的是元素可以在平面内进行位置或形状的转换,而3D转换指的是元素可以在三 ...
CSS3 2D和3D转换 Transform
Transform 适应于对任一DOM元素的2D或3D转换,这些转换效果有:旋转(rotate).拉伸(scale).平移(move).倾斜(skew)等,利用Transform和javascript ...
CSS3动画（2D，3D，自定义动画）
文章目录 css3过渡动画 1 css3动画之2D 1.1 transition过渡动画基础 1.1.1 实现缓入缓出或快入快出效果 1.1.2 实现一秒内变换宽度 1.1.3 实现一秒后变换宽度 1 ...
论文翻译——Rapid 2D-to-3D conversion——快速2D到3D转换
目前想做一个关于2D转3D的项目,由于国内资料比较少而且大部分都是基于国外的研究资料优化而来,所以想翻译翻译国外的论文,强化自己的理解,同时方便他人,英文水平有限,尽量做到"信达雅" ...
CSS学习笔记 07、2D与3D转换
文章目录前言一.2D变形 1.1.旋转变形 transform: rotate(度数)-旋转角度,默认中心点旋转 transform-origin属性(定义旋转点) 1.2.缩放变形 transf ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
CSS笔记11 2D与3D转换
2D转换 PASS:因为图片太色,所以...自行脑补吧各位~~~ 转换(transform)是CSS中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果移动:translate 旋转:rot ...

最新文章

热门文章