Skip to content

Instantly share code, notes, and snippets.

@pepebe
Created August 28, 2011 10:29
Show Gist options
  • Save pepebe/1176514 to your computer and use it in GitHub Desktop.
Save pepebe/1176514 to your computer and use it in GitHub Desktop.
komodo: .box_rotate (transform snippet for Komodo Edit)
.csstransforms .box_rotate {
/* use modernizr to give these rules only to capable browsers */
-moz-transform: rotate([[%ask1:Grad:90.0]]deg); /* FF3.5+ */
-o-transform: rotate([[%ask1]]deg); /* Opera 10.5 */
-webkit-transform: rotate([[%ask1]]deg); /* Saf3.1+, Chrome */
-ms-transform: rotate([[%ask1]]deg); /* IE9 */
transform: rotate([[%ask1]]deg);
-webkit-transform-origin: [[%ask2:left:50%]] [[%ask3:top:50%]];
-moz-transform-origin: [[%ask2]] [[%ask3]];
-ms-transform-origin: [[%ask2]] [[%ask3]];
-o-transform-origin: [[%ask2]] [[%ask3]];
/* No rotation for ielt9 */
}
@pepebe
Copy link
Author

pepebe commented Aug 28, 2011

Komodo snippet for rotating a box by x degree using css3 transforms.

This snippet will ask for some parameters and then add something like this to you stylesheet:

.csstransforms .box_rotate {
    /* .csstransforms is a special class added by modernizr to the body of a document  */
    -moz-transform: rotate(90.0deg);
    -o-transform: rotate(90.0deg);
    -webkit-transform: rotate(90.0deg);
    -ms-transform: rotate(90.0deg);
    transform: rotate(90.0deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin:    50% 50%;
    -ms-transform-origin:     50% 50%;
    -o-transform-origin:      50% 50%;        
}

Frankensteind from css3please.org

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment