body {
/* 透视写到被观察元素的父盒子上面 */
perspective: 500px;
}
div {
200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px);
transform: translateY(100px); */
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 1.translateZ 沿着Z轴移动 */
/* 2 translateZ 跟 px 单位 */
/* 3 translateZ(100px) 向外移动100px */
/* 4 3d移动 简写 */
/* transform: translate3d(x, y, z); */
/* transform: translate3d(100px, 100px, 100px); */
/* 5 xyz 是不能省略的，如果没有就写0 */
transform: translate3d(0, 100px, 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all .4s;
}
img:hover {
/* transform: rotateX(-45deg); */
/* transform: rotateY(-45deg); */
/* transform: rotateZ(-180deg); */
/* transform: rotate3d(x,y,z,deg); */
/* transform: rotate3d(1, 0, 0, 45deg); */
transform: rotate3d(1, 1, 0, 45deg);
}
</style>
</head>
<body>
<img src="../media/pig.jpg" alt="">
</body>
</html>