Rotate an element using css transform

on Mar 9, 2016

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