How to regex rotate properties from transform value


Tags: javascript,css,regex,css-transforms

Problem :

Let's say I have a css transform property that looks like this:

scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)

I need to remove the substring rotateX(50) rotateY(20) rotateZ(10) from the property AND get the 3 values 50, 20, and 10 as an array

How would you do this using javascript?



Solution :

Try this script:

var txt = 'scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)';

var array = txt.match(/\(\d+(?=\))/g).map(function(x){return x.slice(1)});
document.write(array);

var new_text = txt.replace(/\).* /, ') ');
document.write('<br>' + new_text);

Hope it helps.


    CSS Howto..

    Making breadcrumbs… not as easy as literally making breadcrumbs, how can I get text to be inside?

    How to get a different link color on my tumblr static page then my main (front page?)

    How to align this CSS menu to the right of its containing div?

    how to center two div in xs

    How to override CSS style for a specific element if its parent has a specific class

    CSS: How to move text link to the right inside li

    How to partly color the border with css [closed]

    How to change asp:DropDownList extended background color ? CSS class

    How to create a dynamic box with shadow - using PNG pictures

    How to build a CSS style with a LESS mixin parameter?

    How To Refer To CSS Background Image in Visual Studio?

    How to format a button with in Form tag, html?

    How to change hover background on links in css?

    How to style QTableView CSS

    How to use custom CSS to change the distance between the header and top of the page/where the page starts? [closed]

    In IE6, how to float item to right without clearing it?

    CSS: can't understand how to work with the z-index

    CSS Border-Radius Shows Parent's Style

    Sublime - CSS - how to auto add .class for each section in the whole code?

    How to hide hr inside the last li using css

    How to show a pointer on specific table with css and Twitter Bootstrap?

    How to solve this layout design-error due to conflicting css?

    How can I dynamically resize a DIV element's width to fit its text content?

    CSS/JQuery: how to create submenu for table row that stays visible mousing from row onto menu?

    How to change header size in css

    How to link css to html in an express project?

    How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    Jquery how to add :hover to css style sheet

    How do I conditionally apply CSS styles in AngularJS?

    jQuery - How to revert css changes when using slideToggle()?