一、2D转换
1.2D转换之移动translate
（1）transform:translate(x,y);
transform:translate(100px,100px);
（2）transform:translateX(n);
transform:translateX(500px);
（3）transform:translateY(n);
transform:translateY(500px);
div{
width: 200px;
height: 200px;
background: skyblue;
/*x就是x轴上移动位置y 就是y轴上移动位置 中间用逗号分隔*/
/*transform:translate(x,y);*/
/*transform:translate(500px,500px);*/
/*1.我们只移动x坐标*/
/*transform:translate(100px,0)*/
/*transform:translateX(500px);*/
/*2.我们只移动y坐标*/
/*transform:translate(0,100px)*/
/*transform:translateY(500px);*/
}
div:first-child{
transform:translate(30px,30px);
}
div:last-child{
background: #c00;
}
<div></div>
<div></div>
2.让盒子实现水平和垂直居中
div{
/*position: relative;*/
/*width: 200px;
height:200px;
background: skyblue;
/*1.我们transform里面的参数是可以用%*/
/*2.如果里面的参数是%移动的距离是盒子自身的宽度或者高度来对比的*/
/*这里的50%就是50px因为盒子的宽度是100px*/
/*transform:translateX(50%);*/
}
p{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: #c00;
/*margin-top: -100px;
margin-left: -100px;*/
/*translate(-50%,-50%) 盒子往上走自己高度的一半*/
transform:translate(-50%,-50%);
}
span{
/*transform对于行内元素是无效的*/
width: 200px;
height: 200px;
background: orange;
transform:translate(300px,300px);
}
<div><p></p><span></span></div>
3.2D转换之旋转rotate
transform:rotate(度数)
单位:deg
角度为正时，顺时针 为负时，逆时针
默认旋转的中心点是元素的中心点
transform:rotate(30deg);
img{
width: 150px;
margin-top: 50px;
/*顺时针旋转45度*/
/*transform:rotate(30deg);*/
border-radius: 50%;
border:5px solid pink;
/*过渡写在本身上，谁做动画给谁加*/
transition:all 0.8s;
}
img:hover{transform:rotate(360deg);/*transform:translate(50px,200px);*/border:2px solid #c00;}
<img src="images/2.jpg"/>
4.2D转换之旋转rotate案例：三角形
div{position:relative;width: 249px;height: 35px;border: 1px solid #000;left: 50%;top:50%;margin-left: -100px;margin-top:200px;}
div::after{content:'';position: absolute;top:8px;right:15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom:1px solid #000;transform:rotate(45deg);transition:all 0.2s;}
/*鼠标经过div里面的三角旋转*/
div:hover::after{transform:rotate(225deg);top:15px;}
<div></div>
5.转换中心点transform-origin
transform-origin:x y;
注意后面的参数x和y用空格隔开
xy默认转换的中心点是元素的中心点(50%,50%)
还可以给x y设置像素或者方位名词（top bottom left right center）
div{
width: 200px;
height: 200px;
background: yellow;
margin:100px auto;
transition:all .5s;
/*1.可以跟方位名词*/
/*transform-origin:left bottom;*/
/*2.默认的是50% 50% 等价于 center center*/
/*3.可以是px 像素*/
transform-origin:100px 200px;
}
div:hover{transform:rotate(50deg);}
<div></div>
6.旋转中心点案例
div{
overflow:hidden;
width:200px;
height:200px;
border: 1px solid #c00;
margin:100px auto;
}
div::before{
content: '离歌笑';
width: 100%;
height: 100%;
background: pink;
display: inline-block;
transform:rotate(180deg);
transform-origin:left bottom;
transition:all .5s;
text-align:center;
line-height: 200px;
}
div:hover::before{
transform:rotate(0deg);
}
<div></div>
7.2D转换之缩放scale
transform:scale(x,y)
（1）transform:scale(1,1)宽高都放大1倍，相当于没有放大
（2）transform:scale(2,2)宽高都放大2倍
（3）transform:scale(2)只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
（4）transform:scale(0.5,0.5)缩小
优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
div{
overflow:hidden;
width:200px;
height:200px;
background: pink;
margin:100px auto;
transition:all .6s;
transform-origin:left top;
}
div:hover{
/*1.里面写的数字不跟单位，就是倍数的意思 1就是1倍 2就是2倍*/
/*transform:scale(x,y);
transform:scale(2,2);
/*2.修改了宽度为原来的2倍 高度不变*/
/*transform:scale(2,1);
/*3.等比例缩放 同时修改宽度和高度，我们有简单的写法，以下是宽度修改了2倍，高度默认和第一个参数一样*/
/*transform:scale(2);
/*4.我们可以进行缩放，小于1就是缩放*/
/*transform:scale(0.5,0.5);
transform:scale(0.5);
/*5.scale的优势之处：不会影响其他盒子，而且可以设置缩放的中心点*/
/*width: 300px;
height: 300px;*/
transform:scale(2);
}
<div></div>
464
8.图片放大案例
div{overflow: hidden;}
div img{transition:all .7s;}
div img:hover{transform:scale(1.1);}
<body>
<div>
<a href="#">
<img src="images/2.jpg"/>
</a>
</div>
<div>
<a href="#">
<img src="images/2.jpg"/>
</a>
</div>
<div>
<a href="#">
<img src="images/2.jpg"/>
</a>
</div>
</body>
9.分页按钮案例
div{width: 30px;height: 30px;line-height:30px;text-align: center; border: 1px solid skyblue;border-radius: 15px;float: left;margin: 10px;transition:all .3s;}
div:hover{transform:scale(1.2);}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
10.2D转换综合写法
transform:translate() rotate() scale()
同时有位移和其他属性，记得要将位移放到最前
div{width: 200px;height: 200px;background:pink;transition:all .6s;}
/*div:hover{transform:rotate(180deg) translate(150px,50px);}*/
/*我们同时有位移和其他属性，我们需要把位移放在最前面*/
div:hover{transform:translate(150px, 50px) rotate(180deg);}
<div></div>
11.2D转换总结
位移：translate(x,y) translateX(x) translateY(y)
旋转：rotate(度数) 旋转元素 单位是deg
缩放：sacle(x,y) 不跟单位 数字，可以是小数
设置转换中心点：transform-origin:x y 参数可以是百分比，像素或者是方位名词
有位移和其他属性，我们需要把位移放在最前面
二、css3动画
1.基本使用
@keyframes move{
/*开始状态*/
0%{transform:translateX(0px);}
/*结束状态*/
100%{transform:translate(1000px);}
}
div{
width: 200px;
height: 200px;
background: #c00;
/*2.调用动画*/
/*动画名称*/
animation-name:move;
/*持续时间*/
animation-duration:5s;
}
<div></div>
2.动画序列
/*from和to等价于0%和100%*/
@keyframes move{
from{
transform:translate(0px,0px);
}
to{
transform:translate(1000px,0px);
}
}
div{
width: 300px;
height: 300px;
background: pink;
animation-name:move;
animation-duration:.2s;
}
<div></div>
@keyframes move{
0%{
transform:translate(0,0);
}
25%{
transform:translate(1000px,0);
}
75%{
transform:translate(1000px,500px);
}
100%{
transform:translate(0px,500px);
}
}
div{
width: 50px;
height: 50px;
background: skyblue;
animation-name:move;
animation-duration:5s;
animation-direction:alternate;
}
<div></div>
3.动画的常用属性
（1）动画名称：animation-name
（2）持续时间：animation-duration
（3）运动曲线：animation-timing-function（默认是ease）
（4）何时开始：animation-delay
（5）重复次数：animation-iteration-count（默认是1 infinite是无限）
（6）是否反方向播放：animation-direction（默认的是normal 如果想要反方向 就写alternate）
（7）动画结束后的状态：animation-fill-mode（默认是backwards 回到起始状态 我们可以让他停留在结束状态 forwards）
（8）鼠标经过div，让这个div停止动画，鼠标离开就继续动画：animation-play-state（默认是running paused停止动画）
@keyframes move{
0%{
transform:translate(0,0);
}
20%{
transform:translate(1000px,0);
}
40%{
transform:translate(1000px,500px);
}
80%{
transform:translate(0px,500px);
}
100%{
transform:translate(0px,0px);
}
}
div{
width: 100px;
height: 100px;
background: pink;
/*动画名称*/
animation-name:move;
/*持续时间*/
animation-duration:2s;
/*运动曲线*/
animation-timing-function:ease;
/*何时开始*/
animation-delay:1s;
/*重复次数 iteration 重复的 count 次数 infinite 无限*/
animation-iteration-count:infinite;
/*是否反方向播放 默认的是normal 如果想要反方向 就写alternate*/
animation-direction:alternate;
}
div:hover{
/*鼠标经过div，让这个div停止动画，鼠标离开就继续动画*/
animation-play-state:paused;
}
4.动画的简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animation:name duration timing-function delay iteration-count direction fill-mode
animation:myfirst 5s linear 2s infinite alternate
/*动画名称 持续时间 运动曲线 何时开始 重复次数 是否反方向 动画起始或者结束的状态*/
/*animation:name duration timing-function delay iteration-count direction fill-mode;*/
animation:move 2s linear 0s infinite alternate forwards;
/*前面两个属性 name duration 一定要写*/
animation:move 2s linear alternate forwards;
简写属性不包含 animation-play-state
想要动画走回来，而不是直接跳回来：animation-direction:alternate（反方向播放（反复横跳））
盒子动画结束后，停在结束位置：animation-fill-mode:forwards 默认是backwards回到起始状态
5.大数据热点图
body{background-color:#333;}
.map{position: relative;width: 747px;height: 616px;background: url(images/map.png) no-repeat;margin: 0 auto;}
.city{position: absolute;width: 227px;height: 193px;color:#fff;left: 56%;top: 22%;}
.tb{top: 66%;left: 72%;}
.gz{top: 73%;left: 57%;}
.dotted{width: 8px;height: 8px;background: #09f;border-radius: 50%;position: relative;left: 48.5%;top: 48%;}
.city div[class^="pulse"]
{
/*保证我们小波纹在父盒子里面处置居中 放大之后就会中心向四周发散*/
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
width: 8px;height: 8px;
box-shadow:0 0 12px #009dfd;
border-radius:50%;
animation:pulse 1.2s linear infinite;
}
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
@keyframes pulse{
0%{}
70%{
width: 40px;
height: 40px;
opacity:1;
}
100%{
width: 70px;
height: 70px;
opacity:0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city gz">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
6.速度曲线细节
animation-timing-function:规定动画的速度曲线，默认是ease
（1）linear：动画从头到尾的速度是相同的。匀速
（2）ease：默认。动画从低速开始，然后加快，在结束前变慢
（3）ease-in：动画以低速开始
（4）ease-out：动画以低速结束
（5）ease-in-out：动画以低速开始和结束
（6）steps()：指定了时间函数中的间隔数量（步长）
下面是关于steps()步长的小练习
div{
overflow:hidden;width: 0;height:30px;background: #c00;font-size: 20px;
/*强制一行显示*/
white-space:nowrap;
/*steps就是分几步完成我们的动画 有了steps就不要写ease或者linear了*/
animation:w 4s steps(10) alternate forwards;
}
@keyframes w{
0%{width: 0;}
100%{width: 200px;}
}
</style>
</head>
<body>
<div>天生一对地一双嗷嗷嗷</div>
</body>
7.奔跑的熊案例
body{background: #eee;}
.bg{
background: url(images/bg1.png) repeat-x;width: 100%;height: 300px;position: absolute;bottom: 0;
animation:motun 2s steps(10) infinite ;
}
.bear{
position:absolute;
bottom: 0;
width: 200px;height: 100px;
background: url(images/bear.png) no-repeat;
animation:bear 1s steps(8) infinite,move 3s forwards;
}
@keyframes bear{
0%{background-positoon:0 0;}
100%{background-position:-1600px 0;}
}
@keyframes move{
0%{left:0;}
100%{left:50%;}
}
@keyframes motun{
0%{background-positoon:0 0;}
100%{background-position:-1600px 0;}
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="bear"></div>
三、3D转换
1.3D移动translate3d+透视perspective
body{
position:absolute;
/*透视写到被观察元素的父盒子上面*/
perspective:200px;
}
div{
width: 200px;
height: 200px;
background: #c00;
/*transform:translateX(100px);
transform:translateY(100px);
transform:translateX(100px) translateY(100px) translateZ(100px);
/*1.transformZ沿着Z轴移动*/
/*2.transform后面的单位我们一般跟px*/
/*3.transformZ(100px)向外移动100px（向我们的眼睛来移动的）*/
/*4.3D移动有简写的方法*/
/*transform:translate3d(x,y,x);
transform:translate3d(100px,100px,100px);
/*5.xyz是不能省略的，如果没有就写0*/
transform:translate3d(100px,100px,100px);
}
<div></div>
2.translateZ
body{
perspective:500px;
}
div{
width: 200px;height: 200px;
background: pink;
margin:100px auto;
transform:translateZ(200px);
}
3.3D旋转rotateX
body{perspective:300px;}
img{display: block;margin: 100px auto;transition:all 1s;}
img:hover{transform:rotateX(-45deg);}
</style>
</head>
<body>
<div>
<img src="images/pig.jpg"></img>
</div>
</body>
4.3D旋转rotateY
body{perspective:300px;}
img{display: block;margin: 100px auto;transition:all 1s;}
img:hover{transform:rotateY(45deg);}
</style>
</head>
<body>
<div>
<img src="images/pig.jpg"></img>
</div>
5.3D旋转rotateZ
body{perspective:300px;}
img{display: block;margin: 100px auto;transition:all 1s;}
img:hover{transform:rotateZ(45deg);}
</style>
</head>
<body>
<div>
<img src="images/pig.jpg"></img>
</div>
6.3D旋转rotate3d
transformrotate3d(x,y,x,deg)
body{perspective:300px;}
img{display: block;margin: 100px auto;transition:all 1s;}
img:hover{
transform:rotateZ(45deg);
/*transform:rotate3d(x,y,x,deg);*/
/*transform:rotate3d(1,0,0,45deg);
transform:rotate3d(0,1,0,-45deg);*/
tansform:rotate3d(1,1,0,45deg);
}
</style>
</head>
<body>
<div>
<img src="images/pig.jpg"></img>
</div>
</body>
7.3D呈现transform-style
body{
perspective:300px;
}
.box{
position: relative;
width: 200px;
height: 200px;
margin:0 auto;
transition:all 2s;
/*让子元素保持3d立体空间环境*/
transform-style:preserve-3d;
}
.box div{
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: pink;
}
.box div:last-child{
background: #c00;
transform:rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
8.两面翻转的盒子
body{
prespective:350px;
}
.box{
position:relative;
width: 300px;
height: 300px;
margin:100px auto;
transition:all .6s;
/*让背面的盒子保留立体空间*/
transform-style:preserve-3d;
}
.one,.two{
position:absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #c00;
font-size: 30px;
color: #fff;
text-align:center;
line-height: 300px;
}
.one{
background: skyblue;
z-index: 1;
}
.two{
transform:rotateY(180deg);
}
.box:hover{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="one">刘亦菲</div>
<div class="two">胡歌</div>
</div>
</body>
9.3D导航栏案例
ul {margin:100px;}
ul li{width: 120px;height: 40px;line-height:40px;list-style: none;preserve:200px;float: left;margin:0 10px;}
.box{position:relative;width:100%;height: 100%;transform-style:preserve-3d;transition:all .6s;}
.one,.two{position:absolute;left:0;top:0;width:100%;height: 100%;text-align:center;color:#fff;}
.one{background: purple;z-index: 1;transform:translateZ(17.5px);}
.two{background: pink;
/*我们如果有移动或者其他样式,必须先写我们的移动*/
transform:translateY(17.5px) rotateX(-80deg);}
.box:hover{transform:rotateX(90deg);}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="one">胡歌</div>
<div class="two">刘亦菲</div>
</div>
</li>
<li>
<div class="box">
<div class="one">胡歌</div>
<div class="two">刘亦菲</div>
</div>
</li>
<li>
<div class="box">
<div class="one">胡歌</div>
<div class="two">刘亦菲</div>
</div>
</li>
<li>
<div class="box">
<div class="one">胡歌</div>
<div class="two">刘亦菲</div>
</div>
</li>
<li>
<div class="box">
<div class="one">胡歌</div>
<div class="two">刘亦菲</div>
</div>
</li>
</ul>
</body>
10.旋转木马案例
body{perspective:1000px;}
section{position: relative;width: 300px;height: 200px;margin:150px auto;transform-style:preserve-3d;animation:rotate 10s linear infinite;background: url(images/pig.jpg) no-repeat;}
section div{position:absolute;width:100%;height: 100%;left: 0;top: 0;background: url(images/dog.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);}
/*添加动画效果*/
@keyframes rotate{
0%{transform:rotateY(0);}
100%{transform:rotateY(360deg);}
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
11.浏览器私有前缀
-moz-：firefox浏览器私有属性 ：-moz-transform: scale(1.3);
-ms-：代表ie浏览器私有属性 ：-ms-transform: scale(1.3);
-webkit-：代表safari，chrome私有属性 ：-webkit-box-sizing: border-box;
-o-：代表Opera私有属性 ：-o-transform: scale(1.3);
四、自制新闻轮播小案例（keyframes，animation）
*{margin: 0;padding: 0;}
.hg{height: 40px;overflow:hidden;
margin:20px 800px;}
ul{
position: relative;
/*perspective:200px;
transform-style:preserve-3d;*/
animation:lyf 3s ease infinite;
}
ul li{
width: 200px;
overflow:hidden;
line-height: 40px;
background: pink;
color: #fff;
text-align: center;
list-style:none;
}
@keyframes lyf{
0%{top:-2px;}
50%{top:-40px;}
100%{top:-80px;};
}
</style>
</head>
<body>
<div class="hg">
<ul>
<li>刘亦菲</li>
<li>Love</li>
<li>胡歌</li>
</ul>
</div>
