Pemrograman Web : Menggunakan CSS Rotate Untuk Memutar Object pada Halaman Web

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.