2D3D转换动画

最新推荐文章于 2022-06-03 23:09:27 发布

渣渣淘

最新推荐文章于 2022-06-03 23:09:27 发布

阅读量563

点赞数 1

分类专栏：笔记 HTML+CSS 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_60602244/article/details/120938913

版权

笔记同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

HTML+CSS

6 篇文章 0 订阅

订阅专栏

2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

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

1.移动(translate)

语法：

transform.translate(x,y); 或者分开写

transform.translateX(n);

transform.translateY(n);

重点

translate最大优点：不影响到其他元素位置
translate中的百分比单位是相对自身元素的 translate:(50%,50%);
对行内标签没有效果

<style>
		div {
			width: 200px;
			height: 100px;
			background-color: pink;
			/* transform: translate(100px,100px); */ 
			/* 1.移动x坐标 */
			/* transform: translate(100px,0); */
			/* transform: translateX(100px); */
			/* 2.移动y坐标 */
			/* transform: translate(0,100px); */
			/* transform: translateY(100px); */
			/* 3.参数为百分比时  移动的距离是盒子自身的宽度或者高度来对比的 */
			transform: translateY(50%); /* 这里的50%就是50px，因为盒子宽度是100px */
		}
</style>

2.旋转(rotate)

语法：transform:rotate(参数)；

重点

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

<style>
			img {
				width: 150px;
				transition: all 1s; /* 过渡 */
			}
			img:hover {
				/* 顺时针旋转45度 */
				transform: rotate(45deg);
			}
</style>

3.中心点(transform-origin)

语法： transform-origin: x y;

重点：

注意后面参数空格隔开
x y 默认转换的中心点是元素的中心（50% 50%）
可以给x y 设置像素或者方位词(top bottom left right center)

<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 100px auto;
			transition: all 1s;
			/* transform-origin: left bottom; */
			/* transform-origin: 200px 200px; */
			transform-origin: 50% 50%; /* 等价于 center center */
		}
		div:hover {
			transform: rotate(360deg);
		}
</style>

4.缩放(scale)

语法： transform:scale(x, y);

注意：

x y 用逗号分隔
transform:scale(1, 1)：宽高都放大一倍，相当于没有放大
transform:scale(2, 2)：宽和高都放大了2倍
transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2, 2)
transform:scale(0.5, 0.5)：缩小
scale最大的优势：可以设置转换中心点缩放，默认中心点缩放，而且不影响其他盒子

<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		div:hover {
			/* transform: scale(2,2); */
			/* transform: scale(2); */
			/* transform: scale(2,1); */
			/* transform: scale(0.5,0.5); */
			transform: scale(0.5);
		}
</style>

5.综合写法

注意：

格式：transform: translate() rotate() scale()…等
顺序会影响转换效果（先旋转会改变坐标轴方向）
同时有位移和其他属性时，要将位移放到最前面，防止顺序不同带来的影响

<style>
    div:hover {
        transform: translate(150px,50px)  rotate(180deg) scale(1.2)
    }
</style>

CSS3 动画

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

相比较过渡，动画可以实现更多变化，更多的控制，连续自动播放等效果。

动画的基本使用

1.先定义动画

2.再使用（调用）动画

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

<style>
		@keyframes name{
			/* 开始状态 */
			0% {
				
			}
			/* 结束状态 */
			100% {
				
			}
		}
	</style>

动画序列：

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
用百分比规定变化发生的时间，或用关键字”form“和”to“，等同于0%和100%

2.元素使用动画

<style>
	@keyframes move{
			0% {
				transform: translate(0,0);
			}
 	        50% {
       	     	transform: translate(1000px,0);
     	    }
			100% {
				transform: translate(2000px,0);
			}
		}
    div {
        width: 200px;
        height: 200px;
        backfround-color: pink;
        animation-name: move;  /*动画名称*/
        animation-duration:2s;/*持续时间*/
    }
</style>

动画常用属性

1.属性

属性	描述
@keyframes	规定动画
animation	所以动画的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0 （必须）
animation-timing-function	规定动画的速度曲线，默认是”ease"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一个周期逆向播放，默认是“normal”，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是“running”，还有“paused”
animation-fill-mode	规定动画结束后的状态，保持原位置forward，回到起始backwards

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		@keyframes move{
			/* 开始状态 */
			0% {
				
			}
			/* 结束状态 */
			100% {
				transform: translate(100px,0);
			}
		}
		div {
			background-color: pink;
			width: 200px;
			height: 200px;
			/* 动画名称 */
			animation-name: move;
			/* 持续时间 */
			animation-duration: 2s;
			/* 运动曲线 */
			animation-timing-function: ease;
			/* 何时开始 */
			animation-delay: 1s;
			/* 重复次数 */
			animation-iteration-count: infinite;
			/* 是否反向播放 默认是 normal 如果需要反方向就写 alternate */
			animation-direction: alternate;
			/* 动漫结束后的状态 默认是 backwards(回到起始状态) 也可以停留在原状态 forwads */
			animation-fill-mode: forwards;
		}
		div:hover {
			/* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
			animation-play-state: paused;
		}
	</style>
	<body>
		<div></div>
	</body>
</html>

2.动画简写属性

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

animation: myfirst 5s linear 2s infinite alternate

简写属性里不包括animation-play-state（经常和鼠标经过等其他配合使用）
注意时间的顺序（持续时间和何时开始）不能颠倒，其他没有严格要求

3.速度曲线细节

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

steps()就是分几步完成动画，有了steps()就不要写ease 或者 linear了

3D转换

3D位移：translate3d(x,y,z)
3D旋转：rotate3d(x,y,z)
透视：perspective
3D呈现：transform-style

1.3D位移

transform:translateX(100px) : 仅仅在X轴上移动
transform:translateY(100px) : 仅仅在Y轴上移动
transform:translateZ(100px) : 仅仅在Z轴上移动
transform:translate3d(x,y,z) : x,y,z分别指移动的方向距离

2.3D旋转

transform:rotateX(45deg)：沿着X轴旋转45度
transform:rotateY(45deg)：沿着Y轴旋转45度
transform:rotateZ(45deg)：沿着Z轴旋转45度
transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度（了解即可）

注意：transform:rotate3d(x,y,z,deg)中x,y,z是表示旋转轴的矢量

eg: transform:rotate3d(0,1,0,45deg) 沿着Y轴旋转45度

transform:rotate3d(1,1,0,45deg) 沿着X轴Y轴的对角线旋转45度

3.透视

perspective（）

4.3D呈现

transform-style: flat | preserve-3d

注意：

控制子元素是否开启三维立体环境
transform-style: flat;子元素不开启3d立体空间默认的
transform-style: preserve-3d; 子元素开启立体空间
代码写给父级（包括父级的父级），但影响的是子盒子

旋转照片案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				perspective: 1000px;
			}
			section div img {
				width: 300px;
				height: 200px;
			}
			section {
				position: relative;
				width: 300px;
				height: 200px;
				margin: 100px auto;
				transform-style: preserve-3d;
				/* 添加动画 */
				animation: rotate 20s linear infinite;
			}
			section:hover {
				/* 鼠标放上去停止 */
				animation-play-state: paused;
			}
			@keyframes rotate{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(360deg);
				}
			}
			section div {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				/* background: url(旋转照片/1.jpg) no-repeat; */
			}
			section div:nth-child(1) {
				transform: translateZ(300px);
			}
			section div:nth-child(2) {
				/* 先算转再移动 */
				transform: rotateY(60deg) translateZ(300px);
			}
			section div:nth-child(3) {
				/* 先算转再移动 */
				transform: rotateY(120deg) translateZ(300px);
			}
			section div:nth-child(4) {
				/* 先算转再移动 */
				transform: rotateY(180deg) translateZ(300px);
			}
			section div:nth-child(5) {
				/* 先算转再移动 */
				transform: rotateY(240deg) translateZ(300px);
			}
			section div:nth-child(6) {
				/* 先算转再移动 */
				transform: rotateY(300deg) translateZ(300px);
			}
		</style>
	</head>
	<body>
		<section>
			<div><img src="旋转照片/1.jpg" alt=""></div>
			<div><img src="旋转照片/2.jpg" alt=""></div>
			<div><img src="旋转照片/3.jpg" alt=""></div>
			<div><img src="旋转照片/4.jpg" alt=""></div>
			<div><img src="旋转照片/5.jpg" alt=""></div>
			<div><img src="旋转照片/6.jpg" alt=""></div>
		</section>
	</body>
</html>

渣渣淘

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2D3D转换动画

目录2D转换1.移动(translate)2.旋转(rotate)3.中心点(transform-origin)4.缩放(scale)5.综合写法CSS3 动画动画的基本使用1.用keyframes定义动画（类似定义类选择器）2.元素使用动画动画常用属性1.属性2.动画简写属性3.速度曲线细节3D转换1.3D位移2.3D旋转3.透视4.3D呈现旋转照片案例2D转换转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果移动：translate旋转：rota
复制链接

扫一扫