Text Rotate

sachin007

Jan 25, 2026 4

Live Preview

Live Editor

<div class="text-container">
<h1 class="text-rotate">Rotating</h1>
</div>
 * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}
body {
	min-height: 100vh;
	background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
	font-family: 'Arial', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px 20px;
	perspective: 1000px;
	overflow-x: hidden;
	
}
.text-container {
	margin: 60px 0;
	text-align: center;
	
}
.text-rotate {
	font-size: 50px;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 5px;
	transform-style: preserve-3d;
	animation: rotate3d 4s ease-in-out infinite;
	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 20px rgba(0,0,0,.2);
	
}
@keyframes rotate3d {
	0%, 100% {
	transform: rotateY(0deg) rotateX(0deg);
	
}
25% {
	transform: rotateY(180deg) rotateX(10deg);
	
}
50% {
	transform: rotateY(360deg) rotateX(0deg);
	
}
75% {
	transform: rotateY(540deg) rotateX(-10deg);
	
}

}

Categories

Text Rotate

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet