Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set a rotated element’s base placement in CSS ?
CSS, or Cascading Style Sheets, is a powerful tool that provides a range of effects to create beautiful, dynamic web pages. One of the most important tools in the CSS is the ability to rotate elements. Rotating elements, create a unique designs and animations that capture users' attention and help communicate the message. Here, we will explore how to set a rotated element's base placement in CSS.
Transform Property in CSS
The Transform property allows to apply various transformations to elements, including rotation, scaling, and skewing. When a transform is applied to an element, the base location of the element changes, making it difficult to position the element correctly.
Rotate, scale, skew and translate are sub-properties of the transform property. Here, we will focus on the rotated sub-property. Rotate property allows to rotate an element around a fixed point on the page.
Element Rotation in CSS
To rotate an element in CSS, the transform property is used with the rotate() function.
Syntax
<style>
scc-selector{
transform: rotate(angle);
}
</style>
Here "angle" is the amount of rotation to apply to the element, specified in degrees.
For example, the following code will rotate an element by 30 degrees −
.rotate {
transform: rotate(30deg);
}
Rotated element's position is adjusted according to the rotation angle. This can cause the element to shift from its original position, which can be problematic to keep it properly.
Types of rotation transforms available in CSS
There are various types of rotation transforms available in CSS, like rotate(), rotateX(), rotateY(), and rotateZ(). The rotate() function rotates an element around its center point, while rotateX() and rotateY() rotate an element around its horizontal and vertical axes, respectively. The rotateZ() function rotates an element around its z-axis, which is perpendicular to the screen.
The importance of setting a rotated element's base placement
The base position of the rotated element determines where it is anchored in relation to its container. By default, the base placement is set to the center of the element. However, the base placement can be adjusted using the transform-origin property. This is important because it can affect how the element is positioned on the page.
Using the transform-origin property to adjust the base placement of a rotated element
The transform-origin property can be used to adjust the base position of a rotated element. This property specifies the point around which an element is rotated. By default, the base placement is the center of the element, which means the element is rotated around its center point.
To adjust the base placement, we can set the transform-origin property to a different value.
The following code will set the base placement to the top left corner of the element −
.placed {
transform-origin: top left;
transform: rotate(30deg);
}
Let's take a look at some examples of setting a rotated element's base placement in CSS.
Example 1: Rotating a square around its center
In this example, we rotate the square by 30 degrees using the transform property, and the base placement is set to center by default.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
.outer-line {
position: relative;
height: 200px;
width: 200px;
margin: auto;
padding: 5px;
border: 4px solid #fbf;
}
#box {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(30deg);
}
</style>
</head>
<body>
<h3>The square is rotated by 30 degrees around its center point</h3>
<div class="outer-line">
<div id="box"></div>
</div>
</body>
</html>
Example 2: Rotating an element around its bottom-right corner
In this example, we rotate the square by 30 degrees using the transform property, and then set the transform-origin property to bottom right.
<html>
<head>
<style>
body { text-align: center; }
.outer-line {
position: relative;
height: 200px;
width: 200px;
margin: auto;
padding: 5px;
border: 4px solid #fbf;
}
#box {
width: 100px; height: 100px;
background-color: red;
transform: rotate(30deg);
transform-origin: bottom right;
position: absolute;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<h3>The square is rotated by 30 degrees around its bottom-right corner</h3>
<div class="outer-line">
<div id="box"></div>
</div>
</body>
</html>
Example 3: Rotating animation that changes the element's base placement
In this example, we create a square with a red background color in a container and set its initial position using position: absolute, top, and left values. We also set its width and height to 100px, and then use the animation property to apply a keyframe animation called rotate. This animation runs for 2 seconds and repeats infinitely.
Finally, this animation creates a rotating effect where the element's base placement changes from the center to the top-left corner to the bottom-right corner and back to the center again.
<html>
<head>
<style>
body { text-align: center; }
.container {
position: relative;
height: 200px;
width: 200px;
margin: auto;
padding: 5px;
border: 4px solid #fbf;
}
.sqr {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
transform-origin: center;
}
50% {
transform: rotate(180deg);
transform-origin: top left;
}
100% {
transform: rotate(360deg);
transform-origin: bottom right;
}
}
</style>
</head>
<body>
<h3>Rotating animation that changes the element's base placement</h3>
<div class="container">
<div class="sqr"></div>
</div>
</body>
</html>
Conclusion
Here, we have discussed how to rotate an element using CSS. By following given example in this article, we can ensure that the rotated elements are positioned correctly and consistently across different devices.
2K+ Views
To Continue Learning Please Login