rotateY(), rotateX() & rotate() functions

The CSS rotateY() function of the transform property is used to rotate elements vertically around the Y-axis. The CSS rotateX() function of the transform property is used to rotate elements horizontally around the x-axis. The CSS rotate() function of the transform property is used to rotate elements in a clockwise or anti-clockwise direction. The negative values rotate the element in an anti-clockwise direction and the positive values rotate the element in a clockwise direction. The value can also be in turns, gradians, and radians.

<!DOCTYPE html>
<html>
<head>
<style>

p {
 border: 5px outset #f2f;
 width: 250px;
 margin: 300px;
 font-size: 3em;
 text-align: center;
 transform: rotate(50grad); /* rotateY(50deg), rotateX(50deg) */
}
</style>
</head>
<body>

    <p>
        This is a test.
    </p>

</body>
</html>