目录
二，CSS3 2D转换
3，缩放-scale
图片放大案例：
案例：分页按钮：
2D转换综合写法：
三，CSS3 动画
1，页面一打开，一个盒子从左边走到右边：
2，/* 动画序列 */：
3，动画常用属性：编辑
4，热点图案例：
5，速度曲线之steps步长：
案例：奔跑的熊大
四，CSS3 3D转换
三维坐标系！！！！：
1，3D位移：translate3d（x,y,z）
2，3D旋转：rotate3d(x,y,z)
3，透视：perspective
4，3D呈现transfo-style！！！！！！！！！！！！！编辑
-两面翻转的盒子案例：
五，浏览器私有前缀
二，CSS3 2D转换
3，缩放-scale
transform：scale（x，y）；
注意：transform：scale（1，1）；宽和高都放大了一倍，相当于，没有放大
transform：scale（2）；相当于（2，2）
transform：scale（0.5，0.5）；缩小
scale缩放最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子。
图片放大案例：
鼠标经过放大图片：
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all 0.4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="image/tb.jpg" alt=""></a></div>
<div><a href="#"><img src="image/tb.jpg" alt=""></a></div>
<div><a href="#"><img src="image/tb.jpg" alt=""></a></div>
</body>案例：分页按钮：
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>2D转换综合写法：
三，CSS3 动画
1，页面一打开，一个盒子从左边走到右边：
<style>
/* 1，定义动画 */
@keyframes move {
0% {
transform: translate(0px);
}
100% {
transform: translate(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2，调用动画 */
animation-name: move;
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>2，/* 动画序列 */：
1，可以做多个状态的变化
2，里面的百分比要是整数
3，里面的百分比就是 总的时间的划分
<style>
/* 1，定义动画 */
@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2，调用动画 */
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>3，动画常用属性：
简写属性：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态；
注意：简写不包括animation-play-state；
4，热点图案例：
<style>
body {
background-color: #333;
}
.map {
position: relative;
width: 747px;
height: 616px;
background: url(image/map.png) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 227px;
right: 193px;
color: white;
}
.tb {
top: 500px;
right: 80px;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {
/* 保证小波wen在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
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>
</body>5，速度曲线之steps步长：
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让文字强制一行内显示 */
white-space: nowrap;
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>这些这些这些这些这些</div>
</body>案例：奔跑的熊大
<style>
body {
background-color: #ccc;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(image/bear.png) no-repeat;
/* 元素可以添加多个动画，用逗号分隔 */
animation: bear 1s steps(8) infinite,move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
/* margin-left: -100px; */
transform: translate(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>四，CSS3 3D转换
三维坐标系！！！！：
1，3D位移：translate3d（x,y,z）
transform：translateX(100px) ：仅仅在X轴上移动
transform：translateZ(100px) ：仅仅在Z轴上移动 后面的单位一般跟px
transform：translate3d(x,y,z)
xyz不能省略，写成0：transform：translate3d（0，100px，100px）;
2，3D旋转：rotate3d(x,y,z)
transform:rotateX/Y/Z(45deg);沿着X/Y/Z轴正方向旋转45度
transform:rotate3d（）
3，透视：perspective
透视也称为视距：视距就是人的眼睛到屏幕的距离
透视越大成像越小，透视越小成像越大
透视的单位是像素
4，3D呈现transfo-style！！！！！！！！！！！！！
-两面翻转的盒子案例：
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .6s;
/* 让背面的紫色盒子保留独立空间 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
z-index:1;
}
.back {
background-color: purple;
/* 像手机一样，背靠背旋转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">谢谢</div>
<div class="back">素数/<div>
</div>
</body>
</html>五，浏览器私有前缀
为了兼容老版本的写法
