Cara Membuat Efek Rotasi teks dengan CSS
20/10/2019 Risman Hakim 1293 Website
Cara Membuat Efek Rotasi teks dengan CSS - Ada begitu banyak efek yang bisa kita buat dengan memanfaatkan properti yang ada di CSS, contohnya efek perubahan warna, ukuran, rotasi dan lain sebagainya. Nah, pada kesempatan kali ini saya akan bagikan tutorial CSS tentang bagaimana cara Cara Membuat Efek Rotasi teks dengan CSS. Buat teman - teman yang ingin membuatnya bisa mengikuti langkah - langkah sederhana berikut ini.
1. Buat file index.html
Langkah pertama adalah buat satu file index.html kemudian ketikan kode sederhana HTML untuk membuat elemen teks nya yang akan dijadikan efek rotasi.
<section>
<div>DUMETSCHOOL.<div>
</section>
</body>
2. Desain dan buat efek dengan CSS
Langkah selanjutnya adalah mendesaindan tentunya menambahkan efek rotasi pada teksnya, silahkan kalian bisa ketikan kode CSS berikut ini.
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #F7C860;
font-family: sans-serif;
font-weight: 700;
}
section {
position: absolute;
width: 50%;
height: 100%;
font-size: 10vw;
text-transform: uppercase;
background: white;
mix-blend-mode: difference;
perspective: 1000px;
}
section > div {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
color: white;
transition: all 0.5s;
pointer-events: none;
}
body:hover div {
transform: translate(-50%, -50%) rotateY(180deg);
}
section:hover div {
transform: translate(-66%, -50%);
}
Setelah semua kode HTML dan CSS untuk efek rotasi diketikan semua, silahkan simpan kembali filenya kemudian kalian bisa buka pada browser untuk melihat hasil akhirnya.
Bagaiamana, cukup menarik bukan ? Baiklah cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Efek Rotasi teks dengan CSS, semoga tutorial ini bisa menjadi referensi dan bermanfaat tentunya buat teman - teman yang sedang belajar CSS.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
