Skip to main content

Cara Membuat Huruf Jadi Jungkir Balik


Cara membuat teks jungkir balik dengan CSS, seperti yang digunakan Google pada gaya huruf E di judul situs mesin pencarinya, unik.

Keterangan singkat:
* Webkit transform rotasi untuk mengatur tingkat kemiringan atau memutar huruf hingga 150 derajat. Tanda plus (+50deg) miring kekanan dan tanda min (-30deg) miring kekiri.
* Left -1px untuk mengatur spasi antara satu huruf dengan huruf lainnya.

<style>
.koprol{
-webkit-transform:rotate(-30deg);
position:relative;
font-size:100px;
left:-1px;
display:inline-block
}
.salto{
-webkit-transform:rotate(+50deg);
position:relative;
font-size:200px;
right:-1px;
display:inline-block
}
</style>
<span style="display:block;text-align:center;">
<span class="koprol">J</span>
<span class="salto">A</span>
</span>

Contoh hasilnya:

J A