search

Home  >  Q&A  >  body text

css - translateZ表现问题？

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

PHPzPHPz2866 days ago717

reply all(4)I'll reply

  • 迷茫

    迷茫2017-04-17 11:48:43

    Let’s zoom in with the graphic as the center scale

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:48:43

    Your 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();

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 11:48:43

    -webkit-transform:translateZ(-500px); is a translation directly in the z-axis direction. . .

    reply
    0
  • 阿神

    阿神2017-04-17 11:48:43

    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.

    reply
    0
  • Cancelreply