Cara Membuat Efek Rotasi teks dengan CSS

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.

<body>
    <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.

    html, body {
      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.
 

20 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat