Masih ingat dengan artikel blog ini tentang Effect Tulisan 3D dengan CSS3 ??
dimulai dari part 1 trus dilanjut dengan part 2 nya.. 

Kini Final dari effect kedua trik tersebut ditambah satu effect lagi,
yang akhirnya membentuk sebuah kubah 3D seperti ini.

Atau bisi dilihat demo nya.


Sama halnya dengan trik sebelumnya, point penting nya hanya membulak-balik posisinya saja.
dengan mengatur SkewY dan SkewX nya, ditambah penempatan satu bentuk sisi lagi diatasnya.

Agar lebih mudah difahami baca lagi artikel blog ini tentang Effect tulisan 3D sebelumnya part 1 trus dilanjut dengan part 2 nya.

bagi yang sudah menerapkan trick ini sebelumnya,
ane sarankan agar menghapus kode/script yg sudah dipakai,
agar memudahkan dalam pengimplementasian nantinya.


Langkah 1
Masukan kode/script dibawah ini di atas kode ]]></b:skin> 
pada halaman Rancangan Edit HTML.

.cube {
        position: relative;
        top: 80px;
}
.rightFace,
.leftFace,
.topFace div {
        padding: 10px;
        width: 180px;
        height: 180px;
}
.rightFace,
.leftFace,
.topFace {
        position: absolute;
}
.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #EEFC9B
}
.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #9BFCDD;
        left: 200px;
}
.topFace div {
        -webkit-transform: skewY(-30deg) scaleY(1.16);
        -moz-transform: skewY(-30deg) scaleY(1.16);
        background-color: #FC9BFB;
        font-size: 0.862em;
}
.topFace {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        top: -158px;
        left: 100px;
}

Langkah 2
Save template sobat, lalu masuk ke halaman Rancangan Elemen Laman.
dan tambahkan gadget HTML/Java Script jika sobat ingin memasang Effect tulisan 3D ini di sidebar.
dan jika sobat ingin memasang nya di postingan, sobat masuk pada kolom Edit HTML untuk menaruh kode nya.
Dan inilah kode pemanggil dari kode diatas yang sudah dipasang :

<div class="cube">
<div class="topFace">
<div>
Isi conten dari sisi atas
</div>
</div>
<div class="leftFace">
Isi conten dari sisi kiri
</div>
<div class="rightFace">
Isi conten dari sisi kanan
</div>
</div>

Isikan conten yang sobat kehendaki dengan mengganti tulisan/kode diatas pada
Baris 4 untuk isi conten di sisi atas.
Baris 8 untuk isi conten di sisi kiri.
Baris 11 untuk isi conten di sisi kanan.

Langkah 3
Save.. lalu lihat hasilnya.
Effect nya akan membentuk sebuah kubah 3D.


Oya sobat juga dapat berkreasi sendiri dengan mengedit atau mengutak atik kode CSS nya
pada langkah pertama, baik itu kode warna, ukuran widht atau pun yang lain nya.

Selamat mencoba dan berkreasi..
Semoga bermanfaat.