CSS如何使图片朝特定方向缩放？

Question

我有以下CSS，它允许我用效果缩放图像。该代码可以正常工作，将图像缩放6倍。

#helloi {
    width="65px";
    text-decoration: none;
    display: block;
    margin: 0 3px 3px 0;
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1, 1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
#helloi:active {
    width="65px";
    opacity: .9;
    -webkit-transform: scale(6, 6);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(6, 6);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
}

现在我希望能够按照特定方向进行缩放，而不是居中缩放，我希望它根据其原始左侧位置向右调整大小。 这里有一个 jsfiddle 的示例（单击图像）https://jsfiddle.net/nh40s9sf/

- marko c.

Answer 1

您需要设置一个transform-origin点。

默认值是center center，因此您可以将其调整为：

#CIAOCIAOA {
    transform-origin:bottom left;
}

JSfiddle演示

- Paulie_D