<!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>