<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D转换-1</title>
<style>
/*
移动： transform: translate3d(x, y, z);
旋转： rotate3d(0/1, 0/1, 0/1, dmesg);
透视： perspective: px;
呈现：
*/
body {
/* 透视用在父盒子上，越小(越近)被观察对象越大 */
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg); */
transform: translate3d(100px, 100px, 100px) rotate3d(1, 0, 0, 180deg);
}
</style>
</head>
<body>
<img src="../media/pig.jpg" alt="">
</body>
</html>
