如何使用CSS和Javascript透视图像

debugcn 发表于 Dev

格雷厄姆·布罗达（Graeham Broda）

我正在尝试围绕特定点旋转图像。我一直在关注以下示例：http : //www.w3schools.com/cssref/css3_pr_transform-origin.asp

但是，在javascript指令中实现此功能时，我遇到了一些问题。我对该指令的代码如下：

angular.module('GbTestApp').directive('rotate', function () {
    return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.$watch(attrs.degrees, function (rotateDegrees) {
            console.log(rotateDegrees);
            var r = 'rotate(' + rotateDegrees + 'deg)';
            element.css({
                '-moz-transform': r,
                '-moz-transform-origin': 50% 50%,
                '-webkit-transform': r,
                '-webkit-transform-origin': 50% 50%,
                '-o-transform': r,
                '-o-transform-origin': 50% 50%,
                '-ms-transform': r,
                '-ms-transform-origin': 50% 50%,
                'transform-origin': 50% 50%
            });
        });
    }
    }
});

当我取出所有转换原点部分时，此函数起作用，因此我相信这只是我所没有看到的某种格式错误。任何帮助将不胜感激！

罗兰

您需要50% 50%用引号引起来；即"50% 50%"。

但是，我主张将所有transform-origin样式都移到样式表中，并通过类将其添加到图像中。例子：

img.turnable {
  -moz-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

然后应用class="turnable"到该元素，您只需更新即可旋转它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。