一、效果
二、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
perspective: 500px;
/* 视距 距离 眼睛到屏幕的距离 视距越大效果越不明显；视距越大越明显 */
}
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all 0.5s;
}
div:active {
/* transform:translate(x,y) */
/* 变形：移动； */
/* a:activate 鼠标点击没有松开鼠标的时候出发的状态，相当于点击 */
/* transform: translate(50px,50px); */
/* transform: translate(100px); 只跟一个参数就是x轴移动 相当于translateX(100px)*/
/* transform: translate(0,100px); Y轴移动,相当于translateY(100px) */
/* transform:tanslate3d(x,y,z);x和y可以是px可以是%，但是z只能是px */
transform: translate3d(100px,100px,100px);
}
h2 {
transform: translate3d(0, 200px,0);
transition: all 0.8s;
}
h2:hover {
transform: translate3d(0,0,0);
}
section {
width: 520px;
height: 280px;
margin: 10px auto;
overflow: hidden;
}
section img {
transition: all 0.6s;
/* 因为图片缩放了，实际是图片做动画，所以过渡要给img加
即谁做动画，谁加过渡
*/
/* border-radius: 50%; */
transform-origin: 20px 30px;
/* 设置旋转的点，默认是中心位置；对于四个角的元素可以采用left、top这些指定；如果想要更加精确的位置可以采用像素指定 */
}
section:hover img {
/* transform: scale(1.2); 缩放效果,大于1是放大,小于1是缩小 */
transform: rotateY(80deg); 旋转效果,正值顺时针旋转,负值逆时针选择
/* transform: skew(30deg,0); 倾斜效果，skew(xdeg，ydeg) 默认y轴方向为0 */
}
</style>
</head>
<body>
<div>
<h2>每一毫米的突破</h2>
</div>
<section>
<img src="img/2.jpg" >
</section>
</body>
</html>
