Rotate an element using css transform

on

Using CSS3 property transform, elements can be translated, rotated, scaled and skewed in two or three dimensional space. This tutorial will covered rotating an element using CSS transform (2D) rotate.

css-transform-rotate

CSS Syntax:

transform:rotate(30deg);

Example

<style type="text/css">
.outer {
  width: 150px; height:120px; background-color:lightgray;
}
.box1 {
  width: 100px; height:50px; background-color :green;
  transform: rotate(10deg); 
}
.box2 {
  width: 100px; height:50px; background-color: lightblue;
  transform: rotate(-10deg); 
}
</style>

<div class="outer">
  <div class="box1">rotate(+10deg)</div>
  <div class="box2">rotate(-10deg)</div>
</div>
refresh
try it online

Specification and Browser compatibility

SpecificationStatusCategories
CSS3 2D TransformsW3C Working DraftCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 36+ Yes 16+ Yes 10+ Yes 12+ Yes 9+ Yes 12.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 10+ Yes 11+
source: caniuse.com

Suggested posts:

  1. Scale an element using css transform
  2. CSS transform – skew (skewX and skewY)
  3. CSS transform – translateX and translateY
  4. CSS text-transform – capitalize, uppercase and lowercase text
  5. CSS id selectors – define style by element id
  6. CSS – style for element having two classes (both)
  7. CSS visibility – hide an element keeping its space
  8. Css :first-child selector – first child element
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in | Tagged , , ,