<!DOCTYPE html>
<html>
<head><title>css3</title>
<style>
div
{
width:200px;
height:200px;
margin:80px;
background-color:#000000;
/* Rotate div */
transform:rotate(60deg);
-ms-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
-moz-transform:rotate(60deg);
}
</style>
</head>
<body>
<div ><span style="color: #fff; font-size:20px;">Hello, India</span></div>
</body>
</html>
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.CSS transformations allow us to rotate elements in 2D space according to specified angle. Negative degrees will make it rotate counter-clockwise.
Syntax: transform: rotate(angle);
Rotates clockwise from current position.
The CSS property is denoted as Mozilla-only with the "-moz" prefix.
Syntax: -moz-transform:rotate(angle);
The CSS property is denoted as WebKit(Safari and Chrome) with the "-webkit" prefix.
Syntax: -webkit-transform:rotate(angle);
Opera uses its standard o- prefixed property to signal the transform.
Syntax: -o-transform:rotate(angle);
Microsoft has implemented a -ms prefix for the transform:
Syntax: -ms-transform:rotate(angle);
0 Comment(s)