Create Rotate Text Style Using CSS and javascript
2 min readHere we will learn how to create rotate text style using CSS and javascript.
Output
Learn Here
PHP ASP.NET MVC SQL SERVER Javascript
<div class="body2">
<div class="rotating-text">
<p>Learn Here</p>
<p>
<span class="word alizarin">PHP</span>
<span class="word wisteria">ASP.NET</span>
<span class="word peter-river">MVC</span>
<span class="word emerald">SQL SERVER</span>
</p>
</div>
<div>
CSS CODE
.rotating-text {
font-family: Lato, sans-serif;
font-weight: 600;
font-size: 36px;
color: white;
transform: translateX(-80px);
}
.rotating-text p {
display: inline-flex;
margin: 0;
vertical-align: top;
}
.rotating-text p .word {
position: absolute;
display: flex;
opacity: 0;
}
.rotating-text p .word .letter {
transform-origin: center center 25px;
}
.rotating-text p .word .letter.out {
transform: rotateX(90deg);
transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
transition: 0.38s ease;
}
.rotating-text p .word .letter.behind {
transform: rotateX(-90deg);
}
.alizarin {
color: #e74c3c;
}
.wisteria {
color: #8e44ad;
}
.peter-river {
color: #3498db;
}
.emerald {
color: #2ecc71;
}
.sun-flower {
color: #f1c40f;
}
Javascript
var words = document.querySelectorAll(".word"); words.forEach(function (word) { var letters = word.textContent.split(""); word.textContent = ""; letters.forEach(function (letter) { var span = document.createElement("span"); span.textContent = letter; span.className = "letter"; word.append(span); }); }); var currentWordIndex = 0; var maxWordIndex = words.length - 1; words[currentWordIndex].style.opacity = "1"; var rotateText = function () { var currentWord = words[currentWordIndex]; var nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1]; // rotate out letters of current word Array.from(currentWord.children).forEach(function (letter, i) { setTimeout(function () { letter.className = "letter out"; }, i * 80); }); // reveal and rotate in letters of next word nextWord.style.opacity = "1"; Array.from(nextWord.children).forEach(function (letter, i) { letter.className = "letter behind"; setTimeout(function () { letter.className = "letter in"; }, 340 + i * 80); }); currentWordIndex = currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1; }; rotateText(); setInterval(rotateText, 4000);
Result
Learn Here
PHP ASP.NET MVC SQL SERVER Javascript
Hey there 🙂
Your wordpress site is very sleek – hope you don’t
mind me asking what theme you’re using? (and don’t mind
if I steal it? :P)
I just launched my site –also built in wordpress like yours– but the theme slows (!) the site down quite a bit.
In case you have a minute, you can find it by searching for “royal cbd” on Google (would appreciate any feedback) – it’s still in the works.
Keep up the good work– and hope you all take care of yourself
during the coronavirus scare!
Good day! I know this is somewhat off topic but I was wondering
if you knew where I could get a captcha plugin for my comment form?
I’m using the same blog platform as yours and I’m having trouble finding one?
Thanks a lot!
P.S. If you have a minute, would love your feedback
on my new website re-design. You can find it by searching for “royal cbd” – no sweat if you can’t.
Keep up the good work!