CSS3 2D、3D转换

最新推荐文章于 2022-07-22 23:05:38 发布

Hioow

最新推荐文章于 2022-07-22 23:05:38 发布

阅读量205

点赞数

分类专栏：个人前端笔记文章标签： css3

本文链接：https://blog.csdn.net/weixin_46623496/article/details/119279657

版权

个人前端笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文深入介绍了CSS3的2D和3D转换，包括translate、rotate、scale及其在不同轴上的应用，以及如何通过perspective设置3D视图。同时，详细阐述了CSS3动画的创建过程，使用@keyframes定义动画序列，并展示了如何通过animation属性控制动画的播放。此外，还讲解了速度曲线animation-timing-function的使用，帮助实现更精细的动画效果。

摘要由CSDN通过智能技术生成

1.CSS3 2D转换

转换（transform）可以实现元素的位移、旋转、缩放等效果

移动：translate
旋转：rotate
缩放：scale

1.移动

transform:translate(x,y);  或者分开写
transform:translateX(n);
transform:translateY(n);

不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate：（50%，50%）
translate对于行内元素是无效的

2.旋转

transform：rotate（度数)

rotate里面跟度数，单位是 deg 比如 rotate（45deg）
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

2D设置转换中心点 transform-origin

transform-origin：x y；

x y 默认转换的中心点是元素的中心点（50% 50%）
还可以给x y 设置像素或者方位名词（ top bottom left right center）

3.缩放scale

transform：scale（x，y）；

4.2D转换综合写法

同时使用多个转换，其格式为：transform：translate（） rotate（） scale（）…等
其顺序会影响转换的效果

transform:translate(150px,50px) totate(180deg) scale(1.2)

2.CSS3动画

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

制作动画分为两步：

1.先定义动画

2.再使用（调用）动画

1.用keyframes定义动画（类似定义类选择器）

@keyframs 动画名称{
	0%{
		width：100px；
	}
	100%{
		width：200px；
	}
}

动画序列

0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
在@keyframs中规定某项CSS样式，就能创建由当前样式逐渐改变为新样式的动画效果
可以改变任意多的样式任意多次
使用百分比或关键词 ”from“ 和 ”to“ 规定变化发生的时间

2.元素使用动画

	div{
		width:200px;
		height:200px;
		backagecolor:pink;
		margin: 100px auto;
		animation-name:动画名称；
		animation-duration:持续时间;
}

在这里插入图片描述

3.动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；

	animation：myfirst 5s linear 2s infinite alternate；

简写属性里不包含 animation-play-state
想要动画走回来，而不是直接跳回：animation-direction ：alternate
盒子动画结束后，停在结束位置：animation-fill-mode ：forwards

4.速度曲线细节

animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的匀速
ease	默认，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps（）	指定了时间函数中的间隔数量（步长）

2.CSS3 3D转换translate3d

3D位移：translate 3d（x，y，z）
3D旋转：rotate 3d（x，y，z）
透视：perspective
3D呈现 transfrom-style

1.3D移动

translform：translateX（100px）：仅仅是在x轴上移动
translform：translateY（100px）：仅仅是在y轴上移动
translform：translateZ（100px）：仅仅是在z轴上移动
translform：translate 3d(x,y,z)

2.透视perspective

在这里插入图片描述

设置元素被查看位置的视图：

div
{
	perspective: 500;
	-webkit-perspective: 500; /* Safari 和 Chrome */
}

3.3D旋转 rotare3d

transform ：rotateX（45deg）：沿着x轴正方向旋转 45 度
transform ：rotateY（45deg）：沿着y轴正方向旋转 45 度
transform ：rotateZ（45deg）：沿着z轴正方向旋转 45 度
transform ：rotate 3d（x,y,z,deg）：沿着自定义轴旋转 deg 为角度

4.3D呈现 transfrom-style

控制子元素是否开启三维立体环境
transfrom-style ：flat子元素不开启3d立体空间默认的
transfrom - style ：preserve - 3d；子元素开启立体空间