WEB前端初学者笔记（9）--2D与3D
作者：互联网
一、transform
1.定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2.语法
transform: none|transform-functions;
3.取值
4.用法
1 部分效果代码如下
2
3 <!doctype html>
4 <html lang="en">
5 <head>
6 <meta charset="UTF-8">
7 <meta name="viewport"
8 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9 <meta http-equiv="X-UA-Compatible" content="ie=edge">
10 <title>Document</title>
11 <style>
12 #div1{
13 width: 300px;
14 height: 300px;
15 background: red;
16 /*transform: translate(100px,200px);*/
17 /*位移*/
18 transform: rotate(10deg);
19 /*围绕正中心旋转 顺时针*/
20 /*transform: scale(2);*/
21 /*放大*/
22 }
23 </style>
24 </head>
25 <body>
26 <div id="div1">
27
28 </div>
29 </body>
30 </html>
31
6.transform-origin
允许您改变被转换元素的位置，也就是元素发生改变的时候的中心点
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
二、transition
1.定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
-
transition-property（属性名）
-
transition-duration（过渡时间）
-
transition-timing-function（速度曲线）
-
transition-delay（过渡效果开始时间）
2.语法
transition: property duration timing-function delay;
3.取值
4.用法
1 代码如下：
2
3 <!doctype html>
4 <html lang="en">
5 <head>
6 <meta charset="UTF-8">
7 <meta name="viewport"
8 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9 <meta http-equiv="X-UA-Compatible" content="ie=edge">
10 <title>Document</title>
11 <style>
12 #box{
13 width: 475px;
14 height: 308px;
15 border: 5px solid red;
16 margin: 100px auto 0;
17 overflow: hidden;
18 /*超出部分隐藏，加在父级*/
19 }
20 #box>img{
21 width: 100%;
22 height: 100%;
23 transition: transform 1.5s;
24 /*响应速度，谁变加给谁*/
25 }
26 #box>img:hover{
27 transform: scale(1.2);
28
29 }
30 </style>
31 </head>
32 <body>
33 <div id="box">
34 <img src="http://cms-bucket.ws.126.net/2021/1109/7b1dda4ej00r2aacp003oc000d7008sc.jpg" alt="">
35
36 </div>
37 </body>
38 </html>
39
三丶animation
1.定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
-
animation-name
-
animation-duration
-
animation-timing-function
-
animation-delay
-
animation-iteration-count（取值infinite则可以无限循环）
-
animation-direction
2.语法
animation: name duration timing-function delay iteration-count direction;
3.取值
4.用法
通常animation和@keyframes是连用的， 定义的animationname被animation引用，然后实现动画效果 代码如
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 @keyframes move {
11 from{transform: translateY(0) rotate(0deg)scale(0.5)}
12 /*开始*/
13 50%{transform: translateY(500px) rotate(360deg) scale(2)}
14 to{transform: translateY(0) rotate(0deg)scale(0.5)}
15
16 /*结束*/
17
18 }
19 #div1{
20 width: 300px;
21 height: 300px;
22 margin: 100px auto 0;
23 background-color: lightcoral;
24 animation: move 3s infinite}
25 </style>
26 </head>
27 <body>
28 <div id="div1">
29
30 </div>
31 </body>
32 </html>
33
四丶@keyframes
1.定义和用法
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
2.语法
@keyframes animationname {keyframes-selector {css-styles;}}
3.取值
标签：WEB,动画,--,transition,transform,keyframes,2D,animation,属性 来源： https://www.cnblogs.com/AKpz/p/15552497.html