Page 32 - CSS

Browser support and prefixes

• IE supports this property since IE9 with the -ms- prefix. Older versions and Edge don't need
the prefix
• Firefox supports it since version 3.5 and needs the -moz- prefix until version 15
• Chrome since version 4 and until version 34 needs the -webkit- prefix
• Safari needs the -webkit- prefix until version 8
• Opera needs the -o- prefix for version 11.5 and the -webkit- prefix from version 15 to 22
• Android needs the -webkit- prefix from version 2.1 to 4.4.4

Example of prefixed transform:

-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

Examples

Rotate

HTML

<div class="rotate"></div>

CSS

.rotate {
width: 100px;
height: 100px;
background: teal;
transform: rotate(45deg);
}

This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of
the div, 50% from left and 50% from top. You can change the center of rotation by setting the
transform-origin property.

transform-origin: 100% 50%;

The above example will set the center of rotation to the middle of the right side end.

Scale

HTML

<div class="scale"></div>

https://riptutorial.com/ 10