Understanding these units is crucial for creating dynamic and visually appealing web designs, especially with features like transforms, gradients, and animations. Mastering them ensures precise control over rotations and directional properties.
Angle Units: deg, grad, rad, turn
CSS provides several units for specifying angles, each offering a different scale for convenience. These units are essential for properties such as rotate() in transform, conic-gradient(), and animation. Choosing the right unit can make your CSS more readable and easier to manage.
Example 1: Using deg (Degrees)
deg represents degrees, where a full circle is 360 degrees. It's the most commonly understood angle unit, making it intuitive for many developers.
.rotate-element-deg {
transform: rotate(45deg); /* Rotates the element by 45 degrees clockwise */
background-color: lightblue;
width: 100px;
height: 100px;
}
Explanation This example demonstrates rotating an element by 45 degrees using the deg unit. It's straightforward and widely used for its familiarity.
Example 2: Using grad (Gradians)
grad represents gradians, where a full circle is 400 gradians. This unit is less common in web development but is sometimes used in specific mathematical or engineering contexts.
.rotate-element-grad {
transform: rotate(100grad); /* Rotates the element by 100 gradians (equivalent to 90 degrees) */
background-color: lightcoral;
width: 100px;
height: 100px;
}
Explanation Here, we rotate an element by 100 gradians, which achieves a 90-degree rotation. While less common, grad offers an alternative scale for angle definition.
Example 3: Using rad (Radians)
rad represents radians, where a full circle is 2π radians (approximately 6.2832 radians). Radians are fundamental in mathematics and physics, often preferred for calculations and when working with trigonometric functions.
.rotate-element-rad {
transform: rotate(0.7854rad); /* Rotates the element by 0.7854 radians (equivalent to 45 degrees, which is PI/4) */
background-color: lightgreen;
width: 100px;
height: 100px;
}
Explanation This code snippet rotates an element by approximately 0.7854 radians, which is equivalent to 45 degrees. Radians are often used for more precise, mathematical angle definitions.
Example 4: Using turn (Turns)
turn represents turns, where one turn is a full circle. This unit is highly intuitive for rotations, as 0.25turn is a quarter rotation, 0.5turn is a half rotation, and so on.
.rotate-element-turn {
transform: rotate(0.25turn); /* Rotates the element by a quarter turn (equivalent to 90 degrees) */
background-color: lightsalmon;
width: 100px;
height: 100px;
}
Explanation This example shows a rotation of 0.25 turns, which simplifies expressing quarter or half rotations. The turn unit is very readable for simple rotational values.
Example 5: Combining Angle Units in conic-gradient()
Angle units are also critical for defining color stop positions in conic-gradient(), allowing for complex and vibrant circular gradients.
.conic-gradient-angles {
width: 150px;
height: 150px;
border-radius: 50%;
background: conic-gradient(red 0deg, red 90deg, blue 90deg, blue 180deg, green 180deg, green 270deg, yellow 270deg, yellow 360deg);
/* Creates a quartered circle using different angles */
}
Explanation This creates a conic gradient using deg to define four distinct color segments, demonstrating the power of angle units in visual effects. It showcases how different angles define the sweep of the gradient.
Example 6: Animating Rotation with deg
Angle units are fundamental for CSS animations, enabling smooth rotations and transformations over time.
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); /* Full rotation using degrees */
}
}
.animated-element {
width: 80px;
height: 80px;
background-color: purple;
animation: spin 3s linear infinite; /* Animates a continuous spin */
}
Explanation This code defines a simple spin animation that rotates an element 360 degrees using deg for a continuous loop. It highlights the use of angle units in CSS animations.
Example 7: Using rad for Scientific Contexts (Implicit)
While less common directly in everyday CSS, radians are the underlying unit for many mathematical functions that might influence CSS properties in advanced scenarios (e.g., via JavaScript calculations).
/*
This example is conceptual as direct CSS usage of PI for radians is implicit.
However, if you were to calculate an angle in JavaScript and apply it:
*/
/* Assume JavaScript calculated angleInRadians = Math.PI / 2; */
/* Then you would apply it to CSS like: */
.js-calculated-rotate {
transform: rotate(1.5708rad); /* Equivalent to 90 degrees (PI/2 radians) */
background-color: darkorange;
width: 100px;
height: 100px;
}
Explanation This example illustrates a scenario where radians might be used, often after a mathematical calculation in JavaScript, then applied to CSS. It reinforces the importance of understanding radians for more complex, calculated transformations.