CSS text continues to rotate
CSS Continuous Text Rotation
In web design, dynamic text effects can add vitality and appeal to a page. Among them, text rotation is a common dynamic effect. Using the CSS transform property, we can achieve continuous text rotation. This article will detail how to achieve this effect using CSS and provide several sample code examples for reference.
1. Using CSS Animation to Achieve Continuous Text Rotation
First, we can use CSS animation to achieve a continuous text rotation effect. Define the rotation animation using the @keyframes rule, and then apply the animation to the text element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Rotation Animation</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-text {
animation: rotate 5s linear infinite;
}
</style>
</head>
<body>
<h1 class="rotate-text">Welcome to geek-docs.com</h1>
</body>
</html>
Output:
In the example code above, we define an animation called rotate that rotates from 0 to 360 degrees. We then apply this animation to an h1 element with the class rotate-text to achieve the effect of continuous text rotation.
2. Using CSS Transitions to Implement Continuous Text Rotation
In addition to using CSS animations, we can also use CSS transitions to achieve a continuous text rotation effect. By combining the transition and transform properties, we can achieve a continuous text rotation effect when the mouse hovers over the text. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Rotation Transition</title>
<style>
.rotate-text {
transition: transform 0.5s;
}
.rotate-text:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<h1 class="rotate-text">Welcome to geek-docs.com</h1>
</body>
</html>
Output:
In the example code above, we define an h1 element with the class rotate-text and set a transition effect using the transform property. When the mouse hovers over the text, the text rotates 360 degrees continuously.
3. Using CSS Transforms to Implement Continuous Text Rotation
In addition to using animations and transitions, we can also use CSS transforms to implement continuous text rotation. Using the rotate() function of the transform property, we can achieve this continuous text rotation effect. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Rotation Transform</title>
<style>
.rotate-text {
transform: rotate(0deg);
transition: transform 1s linear;
}
.rotate-text:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<h1 class="rotate-text">Welcome to geek-docs.com</h1>
</body>
</html>
Output:
In the example code above, we define an h1 element with the class rotate-text and set the transform property to the rotate() function to achieve the text rotation effect. When the mouse hovers over the text, the text rotates 360 degrees continuously.
4. Using CSS Keyframe Animation to Achieve Irregular Continuous Text Rotation
In addition to simple rotation effects, we can also use CSS keyframe animation to achieve irregular continuous text rotation effects. By defining multiple keyframes, we can achieve text rotation effects at different angles. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Irregular Text Rotation Animation</title>
<style>
@keyframes irregular-rotate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg); }
}
.irregular-rotate-text {
animation: irregular-rotate 5s linear infinite;
}
</style>
</head>
<body>
<h1 class="irregular-rotate-text">Welcome to geek-docs.com</h1>
</body>
</html>
Output:
In the example code above, we define a keyframe animation named irregular-rotate to rotate text at different angles. We then apply this animation to the h1 element with the class irregular-rotate-text to achieve the irregular text continuous rotation effect.
5. Use CSS Transformations and JavaScript to Implement Continuous Mouse-Following Text Rotation
In addition to static text rotation, we can also implement continuous mouse-following text rotation by combining CSS transforms and JavaScript. By listening for mouse motion events, we can update the text’s rotation angle in real time, achieving a mouse-following effect. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Follow Text Rotation</title>
<style>
.follow-rotate-text {
transform-origin: center;
transition: transform 0.1s;
}
</style>
</head>
<body>
<h1 class="follow-rotate-text">Welcome to geek-docs.com</h1>
<script>
const text = document.querySelector('.follow-rotate-text'); document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth - 0.5;
const y = e.clientY / window.innerHeight - 0.5;
text.style.transform = `rotate(${x * 45}deg)`;
});
</script>
</body>
</html>
Output:
In the example code above, we define an h1 element with the class “follow-rotate-text,” set the transform-origin property to the center point, and listen for mouse motion events. By calculating the mouse position relative to the window center, we update the text’s rotation angle in real time, achieving a continuous rotation effect that follows the mouse.