CSS Properties: How to set a rotated element's base placement

Last update on February 24 2024 12:26:51 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to set a rotated element's base placement</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
#div1 {
    position: relative; /* Sets the positioning context for the div */
    height: 100px; /* Sets the height of div1 to 100 pixels */
    width: 100px; /* Sets the width of div1 to 100 pixels */
    margin: 50px; /* Sets the margin around div1 */
    padding: 10px; /* Sets the padding inside div1 */
    border: 2px solid #CC0099; /* Sets the border style and color of div1 */
}

#div2 {
    padding: 18px; /* Sets the padding inside div2 */
    position: absolute; /* Positions div2 absolutely within its nearest positioned ancestor */
    border: 1px solid #990000; /* Sets the border style and color of div2 */
    background-color: #0000CC; /* Sets the background color of div2 */
    -ms-transform: rotate(30deg); /* Applies a rotation transformation for Microsoft browsers */
    -ms-transform-origin: 20% 30%; /* Sets the origin of the rotation for Microsoft browsers */
    -webkit-transform: rotate(30deg); /* Applies a rotation transformation for WebKit-based browsers */
    -webkit-transform-origin: 20% 30%; /* Sets the origin of the rotation for WebKit-based browsers */
    transform: rotate(30deg); /* Applies a rotation transformation for other browsers */
    transform-origin: 20% 15%; /* Sets the origin of the rotation for other browsers */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<h1><strong>w3resource Tutorial</strong></h1><!-- Displays a level 1 heading with bold text "w3resource Tutorial" -->
<div id="div1"><!-- Starts a div with id "div1" -->
<div id="div2">Web Development Tutorial</div><!-- Starts a div with id "div2" inside div1 -->
</div><!-- Ends div1 -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set the base placement of a rotated element using CSS.
div1 is positioned relatively to establish a positioning context for div2.
div2 is positioned absolutely within div1, ensuring its placement relative to div1.
The transform property is used to rotate div2 by 30 degrees, with the transform-origin property specifying the rotation origin. Different vendor prefixes are included for browser compatibility.

Live Demo:

See the Pen transform-origin-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page