Membuat Effect Transform Pada Gambar Menggunakan CSS3

 

Membuat Effect Transform Pada Gambar Menggunakan CSS3

---

CMS Blogger & Wordpress :

1.Copy Dan Terapkan CSS berikut ini sebelum tag </style> dan </b:skin> .
2. Wordpress dan Web Portofolio Bisa Juga meletakkan di file yang berEkstensi .css [style.css] sesuai Pemanggilan CSS di dalam file index.php nya ya .

Style 1 (Zoom-in Effect)

 .AKH-CSS-Effect1-zoom-in img{-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;transition-duration:0.8s;}
  
.AKH-CSS-Effect1-zoom-in img:hover{-webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);transform:scale(1.2);opacity: 0.8;box-shadow: 10px 10px 5px grey;border-radius: 2px;margin: 0px 0px 0px 10px;} 

Style 2 (Zoom-Out Effect)

 .AKH-CSS-Effect1-zoom-out img{-webkit-transition-duration: 4s; -moz-transition-duration: 4s; -o-transition-duration: 4s;transition-duration: 4s;}
  
.AKH-CSS-Effect1-zoom-out img:hover{-webkit-transform:scale(0.1); -moz-transform:scale(0.1); -o-transform:scale(0.1);opacity: 0.8;border-radius: 1px;} 

Style 3 (Horizontal Spin Effect)

 .AKH-CSS-Effect2-3D-Spin-Horizontal img{
-webkit-transition: transform, 2s;-moz-transition: transform, 2s;-o-transition: transform, 2s;-ms-transition: transform, 2s;transition: transform, 2s;}
  
.AKH-CSS-Effect2-3D-Spin-Horizontal img:hover{
-webkit-transform:rotate3d(20,0,0,-360deg);-moz-transform:rotate3d(20,0,0,-360deg);-o-transform:rotate3d(20,0,0,-360deg);-ms-transform:rotate3d(20,0,0,-360deg);transform:rotate3d(20,0,0,-360deg);opacity: 0.8;} 

Style 4 (Vertical Spin Effect)

 .AKH-CSS-Effect2-3D-Spin-Vertical img{-webkit-transition: transform, 3s;-moz-transition: transform, 3s;-o-transition: transform, 3s;transition: transform, 3s;}  
.AKH-CSS-Effect2-3D-Spin-Vertical img:hover{-webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg);transform: rotateY(360deg);opacity: 0.8;}   

Style 5 ( Rotate Effect)

  .AKH-CSS-Effect3-rotation img{
-webkit-transition: transform, 3s; -moz-transition: transform, 3s; -o-transition: transform, 3s;transition: transform, 3s;}
.AKH-CSS-Effect3-rotation img:hover{
-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);opacity: 0.8;} 

CMS Blogger & Wordpress :
1.Buatlah Sebuah Post Baru Dan Letakkan Kode HTML ini di Mode HTML [Bukan Di Compose]

Web Portofolio :
1.Letakkan Kode HTML berikut ini di dalam File index.php

NOTE : COPY Sesuai Style CSS yang Sobat Pasang Di atas ya.

Style 1 (Zoom-in Effect)

 <div class="AKH-CSS-Effect1-zoom-in">
    <img src="LINK IMAGE" />
</div> 

Style 2 (Zoom-Out Effect)

 <div class="AKH-CSS-Effect1-zoom-out">
    <img src="Your-Image_URL" />
</div> 

Style 3 (Horizontal Spin Effect)

 <div class="AKH-CSS-Effect2-3D-Spin-Horizontal">
    <img src="LINK IMAGE" />
</div> 

Style 4 (Vertical Spin Effect)

 <div class="AKH-CSS-Effect2-3D-Spin-Vertical">
    <img src="IMAGE LINK" />
</div> 

Style 5 ( Rotate Effect)

 <div class="AKH-CSS-Effect3-rotation">
    <img src="IMAGE LINK" />
</div> 

Sekian Tutorial Singkat Membuat Effect Transform Pada Gambar Menggunakan CSS3 Mohon di Koreksi jika masih ada kesalahan karna sayapun masih belajar. jangan Lupa untuk komen ya jika berhasil atau mengalami kesusahan .

Incoming Search Terms :

1. Membuat Effect Transform
2. Fungsi Transform CSS
3. Belajar CSS3
4. Membuat efek Hover dengan Css
5. Membuat Hover img menggunakan CSS

Baca Artikel Menarik lainnya

Loading...