首页 前端知识 【Web2D/3D】CSS3的2D/3D转换、过渡、动画(第一篇)

【Web2D/3D】CSS3的2D/3D转换、过渡、动画(第一篇)

2024-02-16 14:02:45 前端知识 前端哥 608 844 我要收藏
1. 前言

        本篇开始介绍Web2D和3D相关基础知识,会从CSS3的2D/3D转换、过渡、动画,讲到Canvas 2D图形绘制,再到SVG,最后到WebGL。

        坐标系:左上点是坐标原点(0,0),x轴正方向向右,y轴正方向向下,z轴正方向向外(垂直屏幕向外)。

2. 2D转换

        CSS3的2D/3D旋转,适用左手定则确认顺时针方向和逆时针方向(角度值是顺正逆负)

css函数说明示例
translate(x,y)定义2D转换,沿着X和Y轴移动

div {

  transform:translate(10px, 20px);

}

translateX(x)定义2D转换,沿着X轴移动
translateY(y)定义2D转换,沿着Y轴移动
rotate(angle)定义2D旋转,angle是旋转角度,正值-顺时针,负值-逆时针,旋转轴-穿过元素中心点、垂直于XY平面

div {

  transform: rotate(30deg);

}

scale(x,y)

定义2D缩放转换,改变元素宽高

注:仅显示上变化了,元素实际尺寸没改变

div {

  transform: scale(2,3);

}

scaleX(n)定义2D缩放转换,改变元素宽度
scaleY(n)定义2D缩放转换,改变元素高度
skew(angleX, angleY)

定义2D倾斜转换,沿着X和Y轴

注:不管怎么倾斜,元素中心点不变

div {

  transform:skew(15deg, 20deg);

}

skewX(angle)

定义2D倾斜转换,沿着X轴

正值-X轴正方向往负方向推

负值-X轴负方向往正方向推

skewY(angle)

定义2D倾斜转换,沿着Y轴

正值-Y轴正方向往负方向推-倾斜

负值-Y轴负方向往正方向推-倾斜

matrix(n,n,n,n,n,n)定义2D转换,6值矩阵
transform-origin

更改变换的参考源(参数点),默认是元素的中心点

transform-origin: x-axis y-axis z-axis;

x-axis: left | center | right | length | %

y-axis: top | center | bottom | length | %

z-axis: length 定义视图置于Z轴何处

x-axis,y-axis在元素自身中定位参考源位置

0% 0% 表示元素左上角

3. 3D转换
css函数说明示例
translate3d(x,y,z)定义3D转换,沿着X、Y和Z轴移动<略>
translateX(x)定义3D转换,沿着X轴移动<略>
translateY(y)定义3D转换,沿着Y轴移动<略>
translateZ(z)定义3D转换,沿着Z轴移动<略>
rotate3d(x,y,z,angle)定义3D旋转,绕(x,y,z)旋转<略>
rotateX(angle)定义3D旋转,绕着X轴旋转<略>
rotateY(angle)定义3D旋转,绕着Y轴旋转<略>
rotateZ(angle)定义3D旋转,绕着Z轴旋转<略>
scale3d(x,y,z)定义3D缩放,<略>
scaleX(x)定义3D缩放,<略>
scaleY(y)定义3D缩放,<略>
scaleZ(z)定义3D缩放,<略>

matrix(n,n,n,n,n,n,n,n,

n,n,n,n,n,n,n,n)

定义3D转换,16值矩阵<略>
perspective(n)定义3D转换元素的透视视图<略>
相关CSS属性
css属性描述示例
transform-origin更改变换的参考源(参数点)<略>
transform-style

嵌套元素如果在3D空间中显示

1. flat 表示所有子元素在2D平面呈现

2. preserve-3d 表示所有子元素在3D空间中呈现

<略>
perspective

3D元素的透视效果,设置在父元素上

1. number 元素距离视图的距离,以像素计

2. none 不设置透视

<略>
perspective-origin

3D元素的底部位置

perspective-origin: x-axis y-axis

x-axis: left | center | right | length | %

y-axis: top | center | bottom | length | %

<略>
backface-visibility

元素不面对屏幕时是否可见

1. visible 背面可见

2. hidden 背面不可见

<略>
4. 过渡
css属性描述示例
transitiontransition: property duration time-function delay是简写

div {

  transition: width 2s ease 1s, height 3s linear 2s;

}

transition-property

指定css属性的过渡效果

1. none 没有属性会获得过渡效果

2. all 所有属性应用过渡效果

3. property 使用过渡效果的css属性,多个时用逗号,分隔

transition-duration

过渡效果花费时间

1. time 完成过渡效果需要花费的时间(秒或毫秒),0值时则无过渡效果

transition-timing-function

过渡效果的速度

1. linear 以相同速度开始直到结束,cubic-bezier(0,0,1,1)

2. ease 先慢中快后慢,cubic-bezier(0.25, 0.1, 0.25,1)

3. ease-in 先慢后平滑,cubic-bezier(0.42,0,1,1)

4. ease-out 先平滑后慢,cubic-bezier(0,0,0,58,1)

5. ease-int-out 先慢中平滑后慢,cubic-bezier(0.42,0,0.58,1)

6. cubic-bezier(n,n,n,N) 自定义速度

transition-delay

过渡效果何时开始

1. time 指定秒或毫秒数之前要等待过渡效果开始

5. 动画
css属性描述示例
@keyframes

定义关键帧动画

1. 使用from to定义关键帧

@keyframes myFirst {

  from {

    ......

  }

  to {

    ......

  }

}

2. 使用百分比%定义关键帧

@keyframes myFirst {

  0% {

    ......

  }

  30% {

    ......

  }

  70% {

    ......

  }

  100% {

    ......

  }

}

@keyframes myFirst {

  0% {

    background: red;

    left:0px;

    top:0px;

  }

  25% {

    background: yellow;

    left:200px;

    top:0px;

  }

  50% {

    background: blue;

    left:200px;

    top:200px;

  }

  75% {

    background: green;

    left:0px;

    top:200px;

  }

  100% {

    background: red;

    left:0px;

    top:0px;

  }

}

animationanimation: name duration timing-function delay iteration-count direction fill-mode play-state;的简写

div {

  animation-name: myfirst;

  animation-duration: 5s;   animation-timing-function: linear;

  animation-delay: 2s;   animation-iteration-count: infinite;

  animation-direction: alternate;

  animation-play-state: running;

}

animation-name

1. 指定关键帧动的名称,由@keyFrames定义的

2. none 没有指定动画

animation-duration

1. time 动画完成一个周期需要花费时间(秒或毫秒),0值时则无动画效果

animation-timing-function

动画效果速度曲线

1. linear 以相同速度开始直到结束,cubic-bezier(0,0,1,1)

2. ease 先慢中快后慢,cubic-bezier(0.25, 0.1, 0.25,1)

3. ease-in 先慢后平滑,cubic-bezier(0.42,0,1,1)

4. ease-out 先平滑后慢,cubic-bezier(0,0,0,58,1)

5. ease-int-out 先慢中平滑后慢,cubic-bezier(0.42,0,0.58,1)

6. cubic-bezier(n,n,n,N) 自定义速度

7. steps(int, start | end)

animation-delay

动画效果何时开始

1. time 指定秒或毫秒数之前要等待动画效果开始

animation-iteration-count

动画被播放的次数

1. number 

2. infinite 一直重复播放

animation-direction

动画播放的方向

1. normal 正常播放

2. reverse 反向播放

3. alternate 奇数次正向,偶数次逆向

4. alternate-reverse 奇数次逆向,偶数次正向

5. initial 设置该属性为它默认值

6. inherit 从父元素继承

animation-fill-mode

动画不播放时,应用到元素的样式

1. none 默认

2. forwards 运用动画结束时的属性值

3. backwards 第一个迭代时第一帧的值

4. both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性

5. inital 设置该属性为它的默认值

6. inherit 从父元素继承

animation-play-state

1. paused 指定暂停动画

2. running 指定运行动画

JS操作会使用到

下一篇:【Web2D/3D】SVG(第二篇)-CSDN博客

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2129.html
标签
3d
评论
发布的文章

vue-echarts实现多功能图表

2024-03-02 09:03:54

echarts参数详细介绍

2024-03-02 09:03:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!