<!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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Let’s zoom in with the graphic as the center
scaleYour css code cannot meet your needs.
Take the center of the graphic (set the base point): -webkit-transform-origin: XX XX; This attribute is to set the base point position of the rotated element
Zoom in: -webkit-transform: scale();
-webkit-transform:translateZ(-500px); is a translation directly in the z-axis direction. . .
Thanks for the invitation!
I modified it based on your code.
demo
Is this the effect you want?
You can read the following two articles, which will be helpful to you.
Detailed explanation of CSS3: transform
CSS3 3D transform
Note that although my demo has been marked for you, I still want to remind you
scale(2.0)2.0 is twice the element to be changed.