CSS image rotation 180
CSS Image Rotation 180
In web design, image rotation is often used to increase the visual appeal of a page. Rotating an image 180 degrees is a common effect, allowing you to flip an image vertically or horizontally, creating a fresh experience for users. In this article, we’ll explain how to use CSS to achieve this image rotation effect.
1. Use the transform property to rotate an image
In CSS, you can use the transform property to rotate an element. By setting the rotate function’s argument to 180 degrees, you can rotate an image 180 degrees.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 180 Degrees</title>
<style>
.rotate-180 {
transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-180">
</body>
</html>
Output:
2. Using the transition property to add animation effects
If you want a smooth transition effect when rotating an image 180 degrees, you can use the transition property to achieve this. By setting the transition property’s value to transform 0.5s ease-in-out, you can create a 0.5-second gradual transition effect as the image rotates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 180 Degrees with Transition</title>
<style>
.rotate-180 {
transform: rotate(180deg);
transition: transform 0.5s ease-in-out;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-180">
</body>
</html>
Output:
3. Using the hover pseudo-class to implement mouseover effects
By using the hover pseudo-class, you can trigger a 180-degree rotation effect on an image when the user hovers their mouse over it. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 180 Degrees on Hover</title>
<style>
.rotate-180 {
transition: transform 0.5s ease-in-out;
}
.rotate-180:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-180">
</body>
</html>
Output:
4. Using JavaScript to Control Image Rotation
In addition to using CSS, you can also use JavaScript to control image rotation. Here’s a sample code that rotates an image 180 degrees by clicking a button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 180 Degrees with JavaScript</title>
<style>
.rotate-180 {
transition: transform 0.5s ease-in-out;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-180" id="image">
<button onclick="rotateImage()">Rotate 180 Degrees</button>
<script>
function rotateImage() {
var image = document.getElementById('image');
image.style.transform = 'rotate(180deg)';
}
</script>
</body>
</html>
Output:
5. Use CSS Animation to Create Rotation Effects
In addition to using the transition attribute, you can also use CSS animation to achieve a 180-degree image rotation effect. Here’s an example code that creates a rotation animation by defining @keyframes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 180 Degrees with CSS Animation</title>
<style>
@keyframes rotate180 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
.rotate-180 {
animation: rotate180 0.5s ease-in-out;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-180">
</body>
</html>
Output:
6. Using a Different Rotation Center Point
By default, an element’s rotation center point is the element’s center. If you want to change the rotation center, you can use the transform-origin property. Here’s a sample code that sets the image’s rotation center to the top left corner:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 180 Degrees with Different Transform Origin</title>
<style>
.rotate-180 {
transform: rotate(180deg);
transform-origin: top left;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-180">
</body>
</html>
Output:
7. Using Multiple Rotation Angles
In addition to rotating 180 degrees, you can also achieve more diverse effects by setting different rotation angles. Here’s a sample code to rotate an image 90 and 270 degrees:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 90 and 270 Degrees</title>
<style>
.rotate-90 {
transform: rotate(90deg);
}
.rotate-270 {
transform: rotate(270deg);
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-90">
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-270">
</body>
</html>
Output:
8. Using CSS Variables to Control Rotation Angle
By using CSS variables, you can control the rotation angle for different elements. The following is a sample code that controls the rotation angle by defining the --rotate-angle variable:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image with CSS Variables</title>
<style>
.rotate {
transform: rotate(var(--rotate-angle));
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate" style="--rotate-angle: 180deg;">
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate" style="--rotate-angle: 90deg;">
</body>
</html>
Output:
9. Using CSS Grid Layout to Implement Rotation Effects
By using CSS Grid Layout, you can achieve more flexible layout and rotation effects. Here’s a sample code example that uses a grid layout to rotate an image 180 degrees:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 180 Degrees with CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.rotate-180 {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="grid-container">
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-180">
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="rotate-180">
</div>
</body>
</html>
Output:
10. Using CSS Filters to Achieve Rotation Effects
In addition to using the transform property, you can also use CSS filters to achieve the effect of rotating an image 180 degrees. Here’s a sample code that uses filter: flip to flip an image horizontally:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image 180 Degrees with CSS Filter</title>
<style>
.flip-horizontal {
filter: flip;
}
</style>
</head>
<body>
<img src="https://static.deepinout.com/gk-static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt="Geek Docs" class="flip-horizontal">
</body>
</html>
Output:
Through the example code above, we’ve detailed how to use CSS to rotate an image 180 degrees. Whether using the transform property, the transition property, the hover pseudo-class, JavaScript controls, CSS animations, different rotation centers, multiple rotation angles, CSS variables, CSS Grid Layout, or CSS filters, you can easily achieve a 180-degree image rotation effect, adding new visual effects to your web design.