CODEWITHSUNDEEP
javascriptcssangularjs
Graeham Broda
Graeham Broda

Reputation: 141

How to pivot image with CSS and Javascript

I am trying to pivot an image around a specific point. I have been following the example here: http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

However, i am running into some issues when implementing this in a javascript directive. my code for this directive is as follows:

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%
            });
        });
    }
    }
});

This function work when I take out all of the transform origin parts, so I believe that this is just a formatting error of some kind that I am just not seeing. Any help will be greatly appreciated!

Upvotes: 1

Views: 1149

Answers (1)

rrowland
rrowland

Reputation: 2814

You need to wrap 50% 50% in quotes; ie "50% 50%".

However, I'd advocate moving all of the transform-origin styles to a stylesheet and adding them to your image via class. Example:

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%;
}

Then apply class="turnable" to the element, and all you'll have to update to turn it is the rotation.

Upvotes: 2

Related Questions