搜尋

首頁  >  問答  >  主體

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

PHPzPHPz2785 天前681

全部回覆(4)我來回復

  • 迷茫

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

    以圖形為中心放大是scale吧

    回覆
    0
  • 大家讲道理

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

    你這段css程式碼是達不到你的需求的。
    以圖形中心（設定基點）：-webkit-transform-origin: XX XX;這個屬性是設定旋轉元素的基點位置
    放大：-webkit-transform: scale();

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-17 11:48:43

    -webkit-transform:translateZ(-500px);是直接在z軸方向的平移。 。 。

    回覆
    0
  • 阿神

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

    謝邀！
    我在你程式碼的基礎上修改了一下。
    demo
    你是要的這種效果嗎？
    你可以看以下兩篇文章，對你會有所幫助。
    CSS3詳解：transform
    CSS3 3D transform變換

    注意我demo雖然已經給你標註了，但是還是想提醒一下scale(2.0)2.0為要變化的元素的二倍。

    回覆
    0
  • 取消回覆