Membuat Efek 3D Membuka Pada Teks Dengan CSS

Membuat Efek 3D Membuka Pada Teks Dengan CSS - Dengan menggunakan fungsi pseudo-elemen, CSS transformasi dan transisi, kita akan membuat efek 3D (3 Dimensi) dengan sangat menarik seperti yang akan saya bagikan berikut ini, membuat efek 3 Dimensi membuka pada teks. Dan efek membuka pada teks ini cocok untuk semua browser karena adanya penggunaan transisi pseudo-elemen khususnya untuk Chrome dan Firefox

Namun saya teidak bisa menerapkannya didalam blog ini dikarenakna kode CSS yang digunakan untuk membuat efek 3D membuka pada teks ini lumayan banyak, sedangkan di template blog ini sendiri sudah banyak penggunaan kode CSSnya, apalagi kode HTML juga lumayan. Namun meski menggunakan kode CSS yang lumayan banyak tidak akan mempengaruhi loading blog dan saya sudah membuat serta memasangnya di sebuah blog yang sementara ini khusus hanya untuk menampilkan DEMO dari efek 3 dimensi membuka pada teks ini. Silahkan klik tombol berikut ini untuk melihat DEMOnya langsung

Klik DEMO Disini

Sudah melihat DEMOnya? Mari kita lanjutkan... Efek membuka pada teks dari Tympanus ini bukan milik saya dan melalui artikel ini saya hanya memberikan infonya saja sedangkan untuk penerapannya, silahkan dikembangkan sendiri :)

Jika sobat belum melihat DEMOnya, saya yakin sobat tidak akan tahu seperti apa tampilan dari efek membuka pada teks ini dan jika sobat sudah melihat DEMOnya, saya juga akan berpikir "Lalu akan saya pasang dimana?" Karena melihat tampilan DEMOnya saja sudah sangat menarik namun tetap bingung untuk memasangnya hihihii..

Sekali lagi, kode CSS untuk efek 3D pada teks membuka ini saya sesuaikan dengan halaman DEMO yang telah saya buat. Jika sobat ingin menampilkannya secara per kalimat dalam bentuk minimal atau sesuai dengan keinginan sobat, silahkan dikembangkan sendiri

CSS

*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #222;
font-weight: 300;
color: #f0f0f0;
font-family: 'Lato', Arial, sans-serif;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
a {
color: #e74d3c;
text-decoration: none;
outline: none;
}

a:hover, a:focus {
color: #fff;
}
.codrops-header {
font-size: 14px;
padding: 20px;
text-align: left;
}
.codrops-header h1 {
font-size: 38px;
line-height: 36px;
padding: 0 0 15px;
font-weight: 400;
color: #ea6657;
margin: 0;
}
.codrops-header a {
display: block;
margin: 10px 0;
font-weight: 400;
}
.grid li .codrops-header a span {
color: #e74d3c;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

.grid li .codrops-header a:hover span {
color: #fff;
}
.codrops-icon:before {
font-family: 'codropsicons';
margin: 0 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
.related {
clear: both;
text-align: center;
font-size: 2em;
padding: 1em 0;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
.grid {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.grid li {
position: relative;
float: left;
font-size: 12em;
line-height: 1.5;
max-height: 290px;
text-align: center;
width: 16.6666667%;
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
}
.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: hsla(0, 0%, 0%, 0.6);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 550px;
-ms-perspective: 550px;
perspective: 550px;
z-index: 1;
}
.grid li span:before,
.grid li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
-webkit-transition: all .3s;
transition: all .3s;
}
.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
.ot-letter-left { background: #e74d3c; }
.ot-letter-left span { text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c; }
.ot-letter-left span:after { color: #e74d3c; }
.ot-letter-left:hover span:after { color: #ea6253; }
.ot-letter-right { background: #ea6657; }
.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657; }
.ot-letter-right span:after { color: #ea6657; }
.ot-letter-right:hover span:after { color: #ed7a6e; }
.ot-letter-top { background: #ee7f72; }
.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72; }
.ot-letter-top span:after { color: #ee7f72; }
.ot-letter-top:hover span:after { color: #f09389; }
.ot-letter-bottom { background: #e95949; }
.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949; }
.ot-letter-bottom span:after { color: #e95949; }
.ot-letter-bottom:hover span:after { color: #eb6e60; }
.ot-letter-left span:before,
.ot-letter-left span:after {
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.ot-letter-left span:before {
-webkit-transform: scale(1.08,1) skew(0deg,1deg);
-ms-transform: scale(1.08,1) skew(0deg,1deg);
transform: scale(1.08,1) skew(0deg,1deg);
}
.ot-letter-left span:after {
text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(-15deg);
-ms-transform: rotateY(-15deg);
transform: rotateY(-15deg);
}
.ot-letter-left:hover span:before {
-webkit-transform: scale(0.85,1) skew(0deg,20deg);
-ms-transform: scale(0.85,1) skew(0deg,20deg);
transform: scale(0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:after {
-webkit-transform: rotateY(-40deg);
-ms-transform: rotateY(-40deg);
transform: rotateY(-40deg);
}
.ot-letter-right span:before,
.ot-letter-right span:after {
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ot-letter-right span:before {
-webkit-transform: scale(0.85,1) skew(0deg,1deg);
-ms-transform: scale(0.85,1) skew(0deg,1deg);
transform: scale(0.85,1) skew(0deg,1deg);
}
.ot-letter-right span:after {
text-shadow: 1px 0px 0px hsla(360, 100%, 100%, 0.1), -3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(15deg);
-ms-transform: rotateY(15deg);
transform: rotateY(15deg);
}
.ot-letter-right:hover span:before {
-webkit-transform: scale(0.85,1) skew(0deg,-20deg);
-ms-transform: scale(0.85,1) skew(0deg,-20deg);
transform: scale(0.85,1) skew(0deg,-20deg);
}
.ot-letter-right:hover span:after {
-webkit-transform: rotateY(40deg);
-ms-transform: rotateY(40deg);
transform: rotateY(40deg);
}
.ot-letter-top span:before,
.ot-letter-top span:after {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ot-letter-top span:before {
-webkit-transform: scale(1,0.95) skew(-4deg,0deg);
-ms-transform: scale(1,0.95) skew(-4deg,0deg);
transform: scale(1,0.95) skew(-4deg,0deg);
}
.ot-letter-top span:after {
text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(-15deg);
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.ot-letter-top:hover span:before {
-webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
-ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
}
.ot-letter-top:hover span:after {
-webkit-transform: translateY(-0.035em) rotateX(-40deg);
-ms-transform: translateY(-0.035em) rotateX(-40deg);
transform: translateY(-0.035em) rotateX(-40deg);
}
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
-webkit-transform: scale(1,1.05) skew(4deg,0deg);
-ms-transform: scale(1,1.05) skew(4deg,0deg);
transform: scale(1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom span:after {
text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}
.ot-letter-bottom:hover span:before {
-webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
-ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:after {
-webkit-transform: translateY(0.045em) rotateX(40deg);
-ms-transform: translateY(0.045em) rotateX(40deg);
transform: translateY(0.045em) rotateX(40deg);
}
@media screen and (max-width: 1190px) {
.grid li {
width: 20%;
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}
@media screen and (max-width: 945px) {
.grid li {
width: 25%;
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}
@media screen and (max-width: 760px) {
.grid li {
width: 33.3333333%;
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
@media screen and (max-width: 560px) {
.grid li {
width: 50%;
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}
@media screen and (max-width: 340px) {
.grid li {
width: 100%;
}
}

HTML
Untuk pemasangan kode HTML berikut ini, sobat hanya perlu mengganti tiap=tipa abjad yang ada sesuai dengan keinginan sobat serta beberapa kode yang perlu diganti seperli adanya link yang tercantum. Dan sekali lagi, kode HTML dan CSS yang dibagikan di artikel ini merupakan bentuk dari halaman DEMO

<div class='container'>
<div class='component'>
<ul class='grid'>
<li><div class='codrops-header'><h1>Animasi Membuka Pada Teks</h1><a class='codrops-icon codrops-icon-prev' href='http://www.all-trick-blogs.com' target='_blank'><span>Home</span></a><a class='codrops-icon codrops-icon-drop' href='http://www.all-trick-blogs.com/2016/12/membuat-efek-3d-membuka-pada-teks.html' target='_blank'><span>Tutorial</span></a><a class='codrops-icon codrops-icon-drop' href='http://all-trick-blogs.com/p/arsip-blog.html' target='_blank'><span>Articles</span></a></div></li>
<li class='ot-letter-left'><span data-letter='P'>P</span></li>
<li class='ot-letter-top'><span data-letter='A'>A</span></li>
<li class='ot-letter-right'><span data-letter='N'>N</span></li>
<li class='ot-letter-bottom'><span data-letter='D'>D</span></li>
<li class='ot-letter-left'><span data-letter='U'>U</span></li>
<li class='ot-letter-left'><span data-letter='A'>A</span></li>
<li class='ot-letter-right'><span data-letter='N'>N</span></li>
<li class='ot-letter-left'><span data-letter='T'>T</span></li>
<li class='ot-letter-top'><span data-letter='E'>E</span></li>
<li class='ot-letter-right'><span data-letter='M'>M</span></li>
<li class='ot-letter-left'><span data-letter='P'>P</span></li>
<li class='ot-letter-top'><span data-letter='L'>L</span></li>
<li class='ot-letter-left'><span data-letter='A'>A</span></li>
<li class='ot-letter-top'><span data-letter='T'>T</span></li>
<li class='ot-letter-right'><span data-letter='E'>E</span></li>
<li class='ot-letter-bottom'><span data-letter='B'>B</span></li>
<li class='ot-letter-right'><span data-letter='L'>L</span></li>
<li class='ot-letter-bottom'><span data-letter='O'>O</span></li>
<li class='ot-letter-right'><span data-letter='G'>G</span></li>
<li class='ot-letter-left'><span data-letter='.'>.</span></li>
<li class='ot-letter-top'><span data-letter='C'>C</span></li>
<li class='ot-letter-right'><span data-letter='O'>O</span></li>
<li class='ot-letter-left'><span data-letter='M'>M</span></li>
<li class='ot-letter-top'><span data-letter='1'>1</span></li>
<li class='ot-letter-left'><span data-letter='2'>2</span></li>
<li class='ot-letter-top'><span data-letter='3'>3</span></li>
<li class='ot-letter-right'><span data-letter='4'>4</span></li>
<li class='ot-letter-bottom'><span data-letter='5'>5</span></li>
<li class='ot-letter-left'><span data-letter='6'>6</span></li>
<li class='ot-letter-bottom'><span data-letter='7'>7</span></li>
<li class='ot-letter-right'><span data-letter='8'>8</span></li>
<li class='ot-letter-left'><span data-letter='9'>9</span></li>
<li class='ot-letter-top'><span data-letter='0'>0</span></li>
<li class='ot-letter-right'><span data-letter='?'>?</span></li>
<li class='ot-letter-left'><span data-letter='@'>@</span></li>
</ul>
</div>
<section class='related'>
<p>Baca juga Artikel berikut ini:</p>
<div><a href='http://www.all-trick-blogs.com/2016/02/membuat-tombol-css-sosial-media-3d.html'><h4>3D Shading Social Media with Box-Shadows</h4></a></div>
<div><a href='http://www.all-trick-blogs.com/2016/02/membuat-tombol-3d-animasi-css-di-blog.html'><h4>3D Button Animated</h4></a></div>
<span>Original by <a href='http://tympanus.net/codrops/2016/11/14/animated-opening-type/' rel='nofollow' target='_blank'>Codrops</a></span>
</section>r
</div>

Bagaimana? Cukup banyak bukan kodenya? Jika sobat berminat untuk membuat efek 3 Dimensi membuka pada teks ini, silahkan.. Sengaja saya tidak memberikan contoh per kalimat secara minimal karena semata-mata hanya untuk memberikan pemahaman dengan adanya kode-kode yang banyak tersebut agar bisa berkreasi karena menerapkan kode CSS tidak semudah menerapkan kode-kode script atau mungkin lebih sulit :)