Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat rotasi teks dengan css

Berikut ini kita akan membahas cara membuat rotasi teks dengan kode yang sesingkat mungkin.
Beberapa pengguna web juga membutuhkan cara ini, termasuk jika website mereka ingin dimodifikasi teks dengan gaya horizontal.
Membuat rotasi teks dengan css
Kode yang kita gunakan dibawah ini merupakan  code css yang nantinya kita pakai dengan menggunakan class rotasi-teks dan anda dapat meletakkan kodenya setelahatau sebelum.
Namun ukuran dari width dan height pada css dibawah ini tidak kita batasi/ automatis.
Anda cukup menambahi kode lebar dan panjangnya sesuai dengan kebutuhan anda.
 <style type="text/css">.teks-vertikal {
 transform: rotate(90deg);
 transform-origin: left top 0;
}</style> 
Contoh dari hasil code diatas adalah seperti gambar dibawah ini:

Membuat rotasi teks dengan css 2

jadi untuk mengubah arah rotasinya, anda cukup mengubah
transform: rotate(90deg);
dimana angka pada 90 diatas bisa diganti berdasarkan derajat putaran yang anda inginkan.
Contoh angka 60 = 60 derajat, angka 90 = 90 derajat.
Paham kan??

Sedangkan untuk kode
transform-origin: left top 0;
Yaitu kode yang menetukan tata letaknya. Diatas ini adalah kode yang menggunakan posisi berada pada kiri atas dengan jarak nol ( 0 ) dari atas/ top.

Jika anda tidak membutuhkan itu, anda cukup menggunakan kode sederhana saja yaitu
transform: rotate(90deg);
 
Terus, bagaimana menerapkannya ke dalam web?
Cara penerapannya adalah dengan cara menyalin semua kode pertama paling atas,
Simpan kedalam html anda didalam kode header web.

Kemudian letakkan didalam kode yang anda ingin buat vertikal. contoh:
<a href=”Url%20tujuan” class=”teks-vertikal”>Teks anda disini</a>
Intinya adalah: anda bisa meletakkan kode teks-vertikal didalam kode yang menggunakan class diwebsite anda.

Oke, sekian dulu tutorial hari ini dan selamat berkunjung.
Pernando Harianja
Pernando Harianja Pendiri dan Pengelola di InfoLoh.com, yang hobby dalam pembuatan Program Komputer, dan ngeBlog. Untuk kenal lebih dekat Follow IG saya: @pernando_harianja

Posting Komentar untuk "Membuat rotasi teks dengan css"