Sesuai Judul gw bakal berbagi Tutorial Ga berguna tapi lucu dengan css :v
hemm gimana menurut kalian kalo text berputar-putar di script html? lucu kan :v apalagi kalo pakek gambarnya yaoming kwkwkwkwk
ok langsung aja ini cssnya di bawah ini
--------------------------------------------------------------
.rotator {
width: 100px;
height: 100px;
margin: 20px;
}
.transition {
-webkit-transition: all 1000s linear;
-moz-transition: all 1000s linear;
-ms-transition: all 1000s linear;
-o-transition: all 1000s linear;
transition: all 1000s linear;
}
.translateAnimationClass {
-webkit-transform: rotateX(43200deg) rotateY(14400deg);
-moz-transform: rotateX(43200deg) rotateY(14400deg);
-ms-transform: rotateX(43200deg) rotateY(14400deg);
-o-transform: rotateX(43200deg) rotateY(14400deg);
transform: rotateX(43200deg) rotateY(14400deg);
}
.animation {
-webkit-animation: rotator 5s linear infinite;
-moz-animation: rotator 5s linear infinite;
-ms-animation: rotator 5s linear infinite;
-o-animation: rotator 5s linear infinite;
animation: rotator 5s linear infinite;
}
@-webkit-keyframes rotator {
0% { -webkit-transform: rotateX(0deg) rotateY(0deg); }
100% { -webkit-transform: rotateX(1080deg) rotateY(360deg); }
}
@-moz-keyframes rotator {
0% { -moz-transform: rotateX(0deg) rotateY(0deg); }
100% { -moz-transform: rotateX(1080deg) rotateY(360deg); }
}
@-ms-keyframes rotator {
0% { -ms-transform: rotateX(0deg) rotateY(0deg); }
100% { -ms-transform: rotateX(1080deg) rotateY(360deg); }
}
@-o-keyframes rotator {
0% { -o-transform: rotateX(0deg) rotateY(0deg); }
100% { -o-transform: rotateX(1080deg) rotateY(360deg); }
}
@keyframes rotator {
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(1080deg) rotateY(360deg); }
}
--------------------------------------------------------------
Taruh di dalem kode <script> kalian!
cara pakek :
Gunain <div class="rotator animation"> dan tutup dengan kode </div>
Sekian dari gw Bay Bay~
No comments:
Write komentar