<!DOCTYPE html>
<html>
<head>
<style>
body { padding: 100px; -webkit-perspective:200px;
-webkit-transform-style:preserve-3d; }
img { -webkit-transform:translateZ(0);
-webkit-transition:5s ease all;
width: 100px; height: 150px;}
img:hover { -webkit-transform:translateZ(-500px); }
</style>
</head>
<body>
<img src="img/1.jpg">
</body>
</html>
我按照视频里的一字不差的写下来，为什么表现形式是飞到了九霄云外而不是以图形中心为基点放大？
求助万能的SF。。。
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
以图形为中心放大是
scale吧你这段css代码是达不到你的需求的。
以图形中心（设置基点）：-webkit-transform-origin: XX XX;这个属性是设置旋转元素的基点位置
放大：-webkit-transform: scale();
-webkit-transform:translateZ(-500px);是直接在z轴方向的平移。。。
谢邀！
我在你代码的基础上修改了一下。
demo
你是要的这种效果吗？
你可以看一下以下两篇文章，对你会有所帮助。
CSS3详解：transform
CSS3 3D transform变换
注意我demo虽然已经给你标注了，但是还是想提醒一下
scale(2.0)2.0为要变化的元素的二倍。