HTML
<div class="rotating-text"> <p>Sizler için</p> <p> <span class="word alizarin">Kurumsal Web Sitesi</span> <span class="word wisteria">E-Ticaret Sitesi</span> <span class="word peter-river">SEO Hizmeti </span> <span class="word emerald">Grafik Tasarım</span> <span class="word sun-flower">Otomasyon</span> </p> <p class="letter-son">yapabiliriz.</p></div>
CSS
.hsub { font-size: 20px; line-height: 0; font-weight: 700;}
.hmain { font-size: 55px; font-weight: 700; line-height: 67px; margin-top: -9px; margin-bottom: -20px;}
.hsuba { font-size: 32px; font-weight: 700; line-height: 42px; margin-bottom: 3px;}
.rotating-text { font-weight: 600; font-size: 32px; margin-top: 32px;}.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; white-space: pre-wrap;}.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: #06f7b5;}
.wisteria { color: #ffcc00;}
.peter-river { color: #ff1800;}
.emerald { color: #00ff6c;}
.sun-flower { color: #b400ff;}
.letter-son { display: block !important; margin-top: 10px !important;}JS
//slider kayan yazı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, 3000);
//slider kayan yazı sonhttps://webformatter.com/html bu siteden daha düzenli hale getirebilirsin.