平移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>平移</title><style>.box{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{/* 电脑是平面，默认无法观察到z轴的平移效果 */transform: translate3d(100px,200px,300px);/* 这种写法是错误的，3d里的小括号必须用逗号隔开三个数，否则属性不生效 *//* transform: translate3d(100px,200px); *//* 但可以用下面这种写法单独设置 */transform: translateX(100px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>
视距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视距</title><style>/* 视距属性必须添加给直接父级 */.father{/* 取值范围建议在800-1200之间太大太小都影响到实际变化效果 */perspective: 1000px;}.son{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.2s;}.son:hover{transform: translateZ(-300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>
旋转
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转</title><style>.box{width: 300px;margin: 100px auto;}.box img{width: 300px;transition: all 0.5s;}.box{perspective: 1000px;}.box img:hover{transform: rotateX(60deg);transform: rotateX(-60deg);transform: rotateY(-60deg);transform: rotateY(60deg);}</style>
</head>
<body><div class="box"><img src="./hero.jpeg" alt=""></div>
</body>
</html>
判断会给旋转设定正负值的方法
旋转拓展（不长用）
