一、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="data: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="data:images/2.jpg"/></a></div><div><a href="#"><img src="data:images/2.jpg"/></a></div><div><a href="#"><img src="data: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="data: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="data: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="data: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="data: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>

web前端基础 html5+css3（十二.2D转换，动画，3D转换）相关推荐

web前端基础 html5+css3（十三.移动端）
目录一.移动端基础 1.视口 2.meta视口标签 3.二倍图做法 4.背景缩放background-size 5.背景图片2倍图 6.css3盒子模型 7.移动端特殊样式二.移动端的常见布局三 ...
web前端基础 html5+css3（十.html5css3新特性）
1.html5新增的语义化标签(针对搜索引擎,提高优化) <header>:头部标签 <nav>:导航标签 <active>:内容标签 <section> ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
小猿圈WEB前端之HTML5+CSS3面试题（一）
越来越多人喜欢前端岗位,毕业季已经悄然来临,很多毕业生面临找工作,那你们在狂欢快乐最后恋恋不舍之际,是否想着过几天招工作的危机.如果想要毕业之后,走向前端的岗位,那看到小编的文章后好好做一下这套题,今 ...
2D转换 + 动画 + 3D转换
1. 2D 转换转换(transform)是CSS3中最具有颠覆性的特性之一,可以实现元素的位移.旋转.缩放等效果移动:translate 旋转:rotate 缩放:scale 1.1 二维坐标系 ...
2D转换+动画+3D转换
文章目录 2D转换 translate 实现盒子的竖直和水平居中 rotate origin 缩放scale 综合写法渐变动画动画序列基本使用动画属性 3D转换 3D移动translate3 ...
2D转换动画 3D转换
好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困 transform:sacle(x,y) 缩放缩放 x y放倍数宽度,高度注意其中x y用逗号分隔可以是小数不会影响其他盒子鼠 ...
web前端开发html5+css3学习笔记day1
软件分类: 系统软件:windows.linux.macOS等应用软件:office.QQ等游戏软件:王者荣耀.QQ飞车等客户端与服务器 ·通常情况下,软件由两部分组成: ----客户端:用户通 ...

web前端基础 html5+css3（十二.2D转换，动画，3D转换）