tRikSonic
Tema
  • Original
  • Translate

Cara membuat teks berputar menggunakan css

Terakhir diperbarui : 23 Desember 2017 - 07.15

Teks berputar menggunakan css3

HTML
<div class='rotate-box'>
  <div class="rotate-box-body">
    <div class="rotate">TRIKSONIC</div>
  </div>
</div>
CSS
.rotate-box {
    background: black;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 15px;
    perspective: 400px;
    height: 300px;
}

.rotate-box .rotate-box-body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.rotate-box .rotate-box-body .rotate {
    position: relative;
    top: 25%;
    font-family: cursive;
    font-size: 65px;
    color: #f1f1f1;
    text-shadow: 3px 4px #c1c1c1;
    text-transform: uppercase;
    font-weight: bold;
    animation-name: rotate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    margin: 35px 0px;
}

@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

@-webkit-keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

@-moz-keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<div class='rotate-box'>
  <div class="rotate-box-body">
    <div class="rotate">TRIKSONIC</div>
  </div>
</div>

<p>
 Klik tombol <button>CSS</button> untuk membuka panel css
</p>

</body>
</html>
.rotate-box {
    background: black;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 15px;
    perspective: 400px;
    height: 300px;
}

.rotate-box .rotate-box-body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.rotate-box .rotate-box-body .rotate {
    position: relative;
    top: 25%;
    font-family: cursive;
    font-size: 65px;
    color: #f1f1f1;
    text-shadow: 3px 4px #c1c1c1;
    text-transform: uppercase;
    font-weight: bold;
    animation-name: rotate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    margin: 35px 0px;
}

@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

@-webkit-keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

@-moz-keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}
//JavaScript

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.