Cara Membuat Efek Rotasi teks dengan CSS

20/10/2019    Risman Hakim    1115    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.

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

Web Design

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
chatarrow