问题描述
我正在尝试围绕特定点旋转图像。 我一直在关注以下示例： :
但是，在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%
});
});
}
}
});
当我取出所有转换原点部分时，此函数起作用，因此我相信这只是我所没有看到的某种格式错误。 任何帮助将不胜感激！
1楼
您需要用引号将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"应用于该元素，您只需更新即可将其旋转。