Search code examples
cssionic-frameworkionicons

How can I CSS transform an Ionicon?


I'm trying to build a bouncy-arrow directive that can be positioned and rotated in markup.

angular.module('directives').directive("bouncyArrow", function ($compile) {

    return {
        replace: true,
        restrict: 'E',
        template: '<span class="ion-arrow-right-c"></span>',
        scope: {
            heading: '='
        },
        link: function (scope, element, attrs) {

            element.css('transform', 'rotate('+attrs.heading+'deg)');
            element.css('-webkit-transform', 'rotate('+attrs.heading+'deg)');

            element.css('background-color', 'red');

        }
    };

});

This appears in my template:

<bouncy-arrow heading="15"></bouncy-arrow>

The arrow with red background color appears correctly. But, the transform has no effect. How can I apply the transform to the ionicon?

UPDATE: Here is the fix...

angular.module('directives').directive("bouncyArrow", function () {

    return {
        replace: true,
        restrict: 'E',
        template: '<span class="ion-arrow-right-c"></span>',
        scope: {
            heading: '=',
            scale: '=',
            positionx: '=',
            positiony: '='
        },
        link: function (scope, element, attrs) {

            var transforms = [
                'translate(' + attrs.positionx+'px,'+attrs.positiony + 'px)',
                'scale(' + attrs.scale + ')',
                'rotate(-'+attrs.heading+'deg)',
            ];

            var css = {
                selector: '.bouncy-arrow:before',
                rules: [
                    'transform: '+transforms.join(' '),
                    '-webkit-transform: '+transforms.join(' ')
                ]
            };


            var sheet = css.selector + ' {' + css.rules.join(';') + '}';
            angular.element(document).find('head').prepend('<style type="text/css">' + sheet + '</style>');

            element.addClass('bouncy-arrow');
        }
    };

});

Solution

  • You need to apply the transform to the :before pseudo class of the "ion-arrow-right-c"

    My suggestion is you create a custom class for your element and then use css to do the transform. Much cleaner that way.