一.缩放案例
1.图片放大
div{
overflow:hidden;
margin: 0 auto;
}
div img{
transition: all 0.4s;
}
/* 谁过渡给谁加 */
div img:hover{
transform:scale(1.2);
}
</style>
</head>
<body>
<div>
<a href="#">
<img src="images/book.jpg" alt="">
</a>
</div>2.分页按钮
二.2D转换综合写法
transform: translate(移动) rotate(旋转) scale(缩放)
多个属性将位移放在最前面
三.css3动画
相较于过渡，可以实现更多变化，更多控制，连续自动播放
1.定义动画（keyframes）
@keyframes move {
/* 开始状态 */
0% { from{ }
属性；
}
/* 结束状态 */
100% { to{ }
属性；
}
}
动画序列 分为多个阶段（0 25% 50% 75% 100%）百分比为整数2.调用动画
给被调用的加animation-name:动画名称；animation-duration:持续时间；
3.动画属性
简写：animation?动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始结束状态
注：简写里不包括 animation-play-state
animation-timing-function:? steps(n)? 分为几步来
三.3D转换
1.三维坐标系
?transform: translate3d(x,y,z);
2.透视perspective（值越小，3D的近大远小效果越明显）
写在被观察元素的的父盒子上
translateZ越大，离眼睛越近，物体越大（允许负值）
同一perspective，多个不同的translateZ值
3.3D旋转
?transform: rotate3d(x,y,z，deg);(x,y,z表示旋转轴的矢量)
eg:rotate3d(1,0,0,45deg) 沿着x轴旋转45度
? ? ? rotate3d(1,1,0,45deg)x,y矢量合成，沿对角线旋转
?transform: rotateX( deg);左手准则：大拇指朝X正半轴，正值旋转方向
transform:rotateY( deg);左手定则：大拇指朝y正半轴，正值旋转方向
?transform: rotateZ( deg);左手准则：大拇指朝X正半轴，正值旋转方向(与2D旋转效果一样)