图片.png
---学习视频是黑马程序员pink老师的教学视频
传送门
3 css 3 2d转换
3.2 2d转换中心点
语法：transform-origin:x y;
注意后面的参数 x y用空格隔开
1.x y默认转换的中心点实元素的中心点（50% 50%）
语法：transform-origin（）
2.还可以给 x y 设置像素或者方位名词（top bottom left right center）
语法：transform-origin:bottom left;
3.还可以是像素
语法：transform-origin:50px 50px;
动画显示时间：transition: all 5s;
3.3 2d转换缩放 scale
语法：transform:scale(x,y)
transform: scale(0.5,0.5); 0.5代表倍数
等比缩放
transform: scale(0.5);写一个值就行
scale不会影响其他元素 而且可以设置中心点
注意：同时使用多次变形 其格式为：
transform：translate() rotate() scale()
其顺序会影响效果
当我们同时有位移和其它属性的时候，记得要将位移方法最前面
4 动画
4.1 animation
语法：
@keyframes move {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(1000px);
}
}
div{
width: 100px;
height: 100px;
background: #000;
animation-name: move;
animation-duration: 2s;
}
动画序列：
1.0%是动画的开始，100%是动画的完成
2.在@keyframes中规定某项css央视 就能创建当前央视逐渐改为新样式的动画效果
3.动画实施元素从一种央视逐渐变化成为另一种样式的
效果 可以改变任意的的样式.次数
- 请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%
动画常用属性
/* 名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 0s;
/* 播放次数 indinite:无限循环*/
animation-iteration-count: infinite;
/* 下一次是否逆向播放 */
animation-direction: normal; /* 逆向 alternate */
/* 规定动画是否正在运行或暂停，默认是 running 还有pause*/
animation-play-state: running;
/* 规定动画结束后的状态 保持forwards 回到起始backwards */
animation-fill-mode: backwards;
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;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
/*简写：*/
div
{
animation: myfirst 5s linear 2s infinite alternate;
名字 时间 匀速 开始时间 无限循环 逆向
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
5 3d转换
5.1 3d 位移
transform: translate3d(100px,100px,100px);
透视：perspective
