六、（4）CSS3-变形、动画
CSS3-变形、动画
CSS3 2D变形
transform属性：可以移动，旋转，和缩放元素。
注意：使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-等前缀以适应不同的浏览器。
- -webkit-transform: 基于webkit内核（chrome，Safari）
- -moz-transform: firefox；
- -ms-transform : IE；
语法：transform：none | <trans form- function> [<trans form- function> ]*
默认值：none
2D 变形函数：
- translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
- translateX()： 指定对象X轴（水平方向）的平移
- translateyY()： 指定对象Y轴（垂直方向）的平移
- scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
- scaleX()： 指定对象X轴的（水平方向）缩放
- scaleY()： 指定对象Y轴的（垂直方向）缩放
- rotate()： 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
- matrix()： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
- skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
- skewx()： 指定对象X轴的（水平方向）扭曲
- skewy()： 指定对象Y轴的（垂直方向）扭曲
缩放
scale(<number>[, <number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)： 指定对象X轴的（水平方向）缩放
scaleY(<number>)： 指定对象Y轴的（垂直方向）缩放
X轴缩放：其实就是当前 元素宽度 * 缩放比例
Y轴缩放：其实就是当前 元素高度 * 缩放比例
<head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background: #ff6600; transition: all 3s ease 0s;/* 选择 执行时间，样式，延迟*/ } /*单击*/ .box:active{ /*X轴平移*/ /*transform: translateX(1000px);*/ /*Y轴平移*/ /*transform: translateY(1000px);*/ /*X轴Y轴平移*/ transform: translate(1000px,500px); } </style> </head> <body> <div class="box"></div> </body>
平移
translate(<length>[, <length>])： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。
translateX(<length>)： 指定对象X轴（水平方向）的平移
translateY(<length>)： 指定对象Y轴（垂直方向）的平移
<head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background: #ff6600; transition: all 3s ease 0s;/* 选择 执行时间，样式，延迟*/ } /*单击*/ .box:active{ /*X轴平移*/ /*transform: translateX(1000px);*/ /*Y轴平移*/ /*transform: translateY(1000px);*/ /*X轴Y轴平移*/ transform: translate(1000px,500px); } </style> </head> <body> <div class="box"></div> </body>
旋转
rotate(<angle>)： 定义 2D 旋转，在参数中规定角度。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
angle:度数，参数必须有单位deg. 如果180deg
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ display: flex; justify-content: center; align-items: center; } .box{ width: 200px; height: 200px; background: #ff6600; border-radius: 50%; transition: all 3s linear 0s; } /*单击*/ .box:active{ /*X轴旋转*/ /*transform: rotateX(360deg);*/ /*Y轴旋转*/ /*transform: rotateY(360deg);*/ /*Z轴平移*/ /*transform: rotateZ(360deg);*/ transform: rotate(360deg); /* 了解 */ /* transform: rotate3d(0.5,0.2,0.3,45deg); */ } </style> </head> <body> <div class="box"> <img src="../img/x.jpg"> </div> </body>
斜切（倾斜）
skew(<angle> [, <angle>])： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>)： 指定对象X轴的（水平方向）扭曲
skewY(<angle>)： 指定对象Y轴的（垂直方向）扭曲
<div style="width: 100px;height: 100px;background: red;transform:skew(40deg,0deg);margin: 0px auto;">
</div>
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ display: flex; justify-content: center; align-items: center; } .box{ width: 200px; height: 200px; background: #ff6600; border-radius: 50%; transition: all 3s linear 0s; } /*单击*/ .box:active{ /*X轴扭曲*/ /*transform: skewX(10deg);*/ /*Y轴扭曲*/ /*transform: skewY(10deg);*/ /*x轴，y轴*/ transform:skew(10deg,20deg); } </style> </head> <body> <div class="box"></div> </body>
设置对象的原点 transform-origin
transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
默认值：50% 50%，效果等同于center center
适用于：所有块级元素及某些内联元素
设置或检索对象以某个原点进行转换。
该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ display: flex; justify-content: center; align-items: center; } .box{ width: 200px; height: 200px; background: #ff6600; transition: all 3s linear 0s; /*transform-origin: left top;*/ /*transform-origin: right bottom;*/ transform-origin: 25% 25%; } /*单击*/ .box:active{ transform: rotate(100deg); } </style> </head> <body> <div class="box"></div> </body>
CSS3 3D变形
transform-style
- transform-style：flat | preserve-3d
- flat：指定子元素位于此元素所在平面内
- preserve-3d： 指定子元素定位在三维空间内
指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
动画
定义动画
浏览器兼容：
@-webkit-keyframes
@-moz-keyframes
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background:#ff6600; /*animation: myframes 1s ease 0s 4;*/ animation: myshow 1s ease 0s 4; } /*自定义动画1*/ @keyframes myframes { from{/*开始*/ background: #00aa00; } to{/*结束*/ background: red; } } /*自定义动画2*/ @keyframes myshow { 0%{background-color: brown} 25%{background-color: pink;transform: translate(1000px,0)} 50%{background-color: chartreuse;transform: translate(1000px,500px)} 75%{background-color: yellow;transform: translate(0,500px)} 100%{background-color: cornflowerblue;transform: translate(0,0)} } </style> </head> <body> <div class="box"></div> </body>
注意：当您在 @keyframes 中创建动画后，动画不会执行，你需要把它捆绑到某个选择器，并且这个选择器能匹配到某个元素，简单理解：你需要把动画绑定到某个元素上才会执行。
动画属性
语法：
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*
默认值：看每个独立属性
相关属性：[ animation-play-state ]
取值：
[ animation-name ]： 检索或设置对象所应用的动画名称
[ animation-duration ]： 检索或设置对象动画的持续时间
[ animation-timing-function ]： 检索或设置对象动画的过渡类型
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
[ animation-delay ]： 检索或设置对象动画延迟的时间
[ animation-iteration-count ]： 检索或设置对象动画的循环次数
infinite： 无限循环
<number>： 指定对象动画的具体循环次数
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0} .box{ width: 100px; height: 100px; background-color: coral; /* 执行动画 */ animation: bgchange-move 2s ease 0s infinite normal both paused; } @keyframes bgchange-move { 0%{background-color: brown} 25%{background-color: pink;transform: translate(1000px,0)} 50%{background-color: chartreuse;transform: translate(1000px,500px)} 75%{background-color: yellow;transform: translate(0,500px)} 100%{background-color: cornflowerblue;transform: translate(0,0)} } </style> </head> <body> <button id='btn'>播放/暂停</button> <div class="box"></div> <script> var flag = false; btn.onclick = function(){ if(!flag){ document.querySelector('.box').style.animationPlayState = 'running'; }else{ document.querySelector('.box').style.animationPlayState = 'paused'; } flag = !flag; } </script> </body>
动画状态
- animation-fill-mode ： 设置对象动画时间之外的状态
- none： 默认值。不设置对象动画之外的状态
- forwards： 设置对象状态为动画结束时的状态
- backwards： 设置对象状态为动画开始时的状态
- both： 设置对象状态为动画结束或开始的状态。 设置animation-direction:alternate和animation-iteration-count:2可见效果。
面试题
1. CSS3的动画如何实现？
