Tutorial Membuat logo windows8 dengan css

Setelah kemarin membuat Logo Photoshop dan Android dengan css3 kali ini taufan akan share tentang cara
membuat logo windows8 dengan animasi hanya dengan Css3 tentunya.
Logo windows 8 memang sudah sangat populer, tak ada salahnya bila kita mencoba membuat logo ini dengan css.
oke langsung saja to the point!

membuat logo windows 8 beranimasi dengan css

berikut ini adalah code css windows8 dengan animasi

.windows_8_logo_container {
padding: 50px 0;
background: #fff;
height: 150px;
}
.window {
position: relative;
float: left;
margin-left: 50px;
width: 200px;
height: 150px;
background: #00adef;
-webkit-transform: perspective(400px) rotateY(-25deg);
-moz-transform: perspective(400px) rotateY(-25deg);
-o-transform: perspective(400px) rotateY(-25deg);
-ms-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
-webkit-animation: windows_animation 5s infinite;
-moz-animation: windows_animation 5s infinite;
-ms-animation: windows_animation 5s infinite;
animation: windows_animation 5s infinite;
}
.window::after,.window::before {
content: '';
background: #fff;
height: 100%;
width: 10px;
left: 50%;
margin-left: -5px;
top: 0;
position: absolute;
}
.window::before {
left: 0;
top: 50%;
margin-top: -5px;
margin-left: 0;
height: 10px;
width: 100%;
position: absolute;
}
.logo_text {
color: #00adef;
font: 120px/150px 'Arial';
padding-left: 20px;
float: left;
}
@keyframes "windows_animation" {
0%,100% {
-webkit-transform: perspective(400px) rotateY(-25deg);
-moz-transform: perspective(400px) rotateY(-25deg);
-o-transform: perspective(400px) rotateY(-25deg);
-ms-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
    -webkit-transform: perspective(400px) rotateY(-35deg);
    -moz-transform: perspective(400px) rotateY(-35deg);
    -o-transform: perspective(400px) rotateY(-35deg);
    -ms-transform: perspective(400px) rotateY(-35deg);
    transform: perspective(400px) rotateY(-35deg);
 }
}
@-moz-keyframes windows_animation {
0%,100% {
-moz-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
   -moz-transform: perspective(400px) rotateY(-35deg);
   transform: perspective(400px) rotateY(-35deg);
 }
}
@-webkit-keyframes "windows_animation" {
0%,100% {
-webkit-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
   -webkit-transform: perspective(400px) rotateY(-35deg);
   transform: perspective(400px) rotateY(-35deg);
 }
}
@-ms-keyframes "windows_animation" {
0%,100% {
-ms-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
   -ms-transform: perspective(400px) rotateY(-35deg);
   transform: perspective(400px) rotateY(-35deg);
 }
}
-webkit-animation {
-webkit-transform: perspective(400px) rotateY(-25deg);
-moz-animation  {
-webkit-transform: perspective(400px) rotateY(-25deg);
-ms-animation  {
-webkit-transform: perspective(400px) rotateY(-25deg);
animation  {
transform: perspective(400px) rotateY(-25deg);
-moz-transform: perspective(400px) rotateY(-25deg);
-o-transform: perspective(400px) rotateY(-25deg);
-ms-transform: perspective(400px) rotateY(-25deg);
transform: perspective(400px) rotateY(-25deg);
}
 50% {
    -webkit-transform: perspective(400px) rotateY(-35deg);
    -moz-transform: perspective(400px) rotateY(-35deg);
    -o-transform: perspective(400px) rotateY(-35deg);
    -ms-transform: perspective(400px) rotateY(-35deg);
    transform: perspective(400px) rotateY(-35deg);
 }

Dan berikut ini adalah kode html logo windows8 nya

<div class="windows_8_logo_container">
<div class="window"></div>
<div class="logo_text">Windows 8</div>
</div>

Hasil Akhirnya adalah bisa anda lihat Demo nya dibawah ini, cukup sekian dulu ya, semoga artikel ini bisa bermanfaat dan menambah wawasan bagi anda, terima kasih sudah berkunjung!
Selamat berkreatifitas!

Windows 8