ciser/src/_rotations.css

Functional CSS, help quickly build and design new UI without writing css.

/*

   ROTATIONS

*/

.rotate-45 { transform: rotate(45deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-135 { transform: rotate(135deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-225 { transform: rotate(225deg); }
.rotate-270 { transform: rotate(270deg); }
.rotate-315 { transform: rotate(315deg); }

@media screen and (min-width: 30em){
  .rotate-45-ns { transform: rotate(45deg); }
  .rotate-90-ns { transform: rotate(90deg); }
  .rotate-135-ns { transform: rotate(135deg); }
  .rotate-180-ns { transform: rotate(180deg); }
  .rotate-225-ns { transform: rotate(225deg); }
  .rotate-270-ns { transform: rotate(270deg); }
  .rotate-315-ns { transform: rotate(315deg); }
}

@media screen and (min-width: 30em) and (max-width: 60em){
  .rotate-45-m { transform: rotate(45deg); }
  .rotate-90-m { transform: rotate(90deg); }
  .rotate-135-m { transform: rotate(135deg); }
  .rotate-180-m { transform: rotate(180deg); }
  .rotate-225-m { transform: rotate(225deg); }
  .rotate-270-m { transform: rotate(270deg); }
  .rotate-315-m { transform: rotate(315deg); }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .rotate-45-ml { transform: rotate(45deg); }
  .rotate-90-ml { transform: rotate(90deg); }
  .rotate-135-ml { transform: rotate(135deg); }
  .rotate-180-ml { transform: rotate(180deg); }
  .rotate-225-ml { transform: rotate(225deg); }
  .rotate-270-ml { transform: rotate(270deg); }
  .rotate-315-ml { transform: rotate(315deg); }
}

@media screen and (min-width: 60em){
  .rotate-45-l { transform: rotate(45deg); }
  .rotate-90-l { transform: rotate(90deg); }
  .rotate-135-l { transform: rotate(135deg); }
  .rotate-180-l { transform: rotate(180deg); }
  .rotate-225-l { transform: rotate(225deg); }
  .rotate-270-l { transform: rotate(270deg); }
  .rotate-315-l { transform: rotate(315deg); }
}