---

.

---

---

Metode dan Algoritma | Pemrograman Web : Menggunakan CSS Rotate Untuk Memutar Object pada Halaman Web . Anda bisa melakukan konsultasi tentang Pemrograman Web : Menggunakan CSS Rotate Untuk Memutar Object pada Halaman Web melalui form di samping kanan !!!

---

Kadang kita perlu merotasi suatu object baik teks, gambar, table, box dan sebagainya di halaman web agar berputar beberapa derajat. Misalnya merotasi terbalik 90 derajat, 180 derajat (terbalik), dsb.


Untuk melakukannya bisa digunakan CSS berikut :

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

Atau dapat digunakan contoh lain :

<style>


.box {


display:block;


position:absolute; right:-5px; top:15px;


-webkit-transform: rotate(-90deg);


-moz-transform: rotate(-90deg);


filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


}


</style>

Berikut ini contoh-contoh lain penggunaan CSS3 dari http://CSS3Please.com :

.box_round {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */


  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}


.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}


.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #444444, #999999);
}


.box_rgba {
  background-color: transparent;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6–IE9
            zoom: 1;
}


.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
     -moz-transform: rotate(7.5deg);  /* FF3.5+
      -ms-transform: rotate(7.5deg);  /* IE9
       -o-transform: rotate(7.5deg);  /* Opera 10.5
          transform: rotate(7.5deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
}


.box_scale {
  -webkit-transform: scale(0.8);  /* Saf3.1+, Chrome
     -moz-transform: scale(0.8);  /* FF3.5+
      -ms-transform: scale(0.8);  /* IE9
       -o-transform: scale(0.8);  /* Opera 10.5+
          transform: scale(0.8);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9
                     M11=0.9999025240093042, M12=-0.013962180339145272, M21=0.013962180339145272, M22=0.9999025240093042,SizingMethod='auto expand');
}


.box_3dtransforms {
  -webkit-perspective: 300;  /* Saf4+, Chrome 12+
     -moz-perspective: 300;  /* FF10+
      -ms-perspective: 300;  /* IE10+
          perspective: 300;
  -webkit-transform: rotateY(180deg);  -webkit-transform-style: preserve-3d;
     -moz-transform: rotateY(180deg);     -moz-transform-style: preserve-3d;
      -ms-transform: rotateY(180deg);      -ms-transform-style: preserve-3d;
          transform: rotateY(180deg);          transform-style: preserve-3d;
}


.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* FF4+ */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
          transition: all 0.3s ease-out;
}


.box_textshadow {
     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}


.box_opacity {
  opacity: 0.9; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
  filter: alpha(opacity=90); /* IE6-IE8 */
}


* {
  -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
     -moz-box-sizing: border-box; /* FF1+ */
          box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}


.box_bgsize {
  -webkit-background-size: 100% 100%; /* Saf3-4 */
          background-size: 100% 100%; /* Opera, IE9, Saf5, Chrome, FF4+ */
}


.box_columns {
  -webkit-column-count: 2;  -webkit-column-gap: 15px; /* Saf3, Chrome
     -moz-column-count: 2;     -moz-column-gap: 15px; /* FF3.5+
          column-count: 2;          column-gap: 15px; /* Opera 11+
}


.box_animation:hover {
  -webkit-animation: myanim 5s infinite; /* Saf5, Chrome */
     -moz-animation: myanim 5s infinite; /* FF5+ */
       -o-animation: myanim 5s infinite; /* Opera 12+ */
          animation: myanim 5s infinite; /* Saf5, Chrome */
}


@-webkit-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-o-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}


@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot?#') format('eot'),  /* IE6–8 */
       url('myfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('myfont.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}


.box_tabsize {
  -moz-tab-size: 2; /* Firefox 4+ */
    -o-tab-size: 2; /* Opera 10.60+ */
       tab-size: 2;
}

Semoga bermanfaat.

---

ActionScript AS3 ASP.NET AJAX C / C++ C# Clipper COBOL ColdFusion DataFlex Delphi Emacs Lisp Fortran FoxPro Java J2ME JavaScript JScript Lingo MATLAB Perl PHP PostScript Python SQL VBScript Visual Basic 6.0 Visual Basic .NET Flash MySQL Oracle Android

---

Related Post :

---

Judul: Pemrograman Web : Menggunakan CSS Rotate Untuk Memutar Object pada Halaman Web
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh hank2

Anda sedang membaca artikel tentang Pemrograman Web : Menggunakan CSS Rotate Untuk Memutar Object pada Halaman Web, Semoga artikel tentang Pemrograman Web : Menggunakan CSS Rotate Untuk Memutar Object pada Halaman Web ini sangat bermanfaat bagi teman-teman semua, jangan lupa untuk mengunjungi lagi melalui link Pemrograman Web : Menggunakan CSS Rotate Untuk Memutar Object pada Halaman Web.

---