Berbagai Efek Transisi Pada Gambar

Published by Concept Phone Senin, 27 Agustus 2018

Efek Bumping

.demo-1 {   -webkit-transition:all .5s ease-out;   -moz-transition:all .5s ease-out;   -ms-transition:all .5s ease-out;   -o-transition:all .5s ease-out;   transition:all .5s ease-out; }  .demo-1:hover {   -webkit-transform:translate(0px,10px);   -moz-transform:translate(0px,-10px);   -ms-transform:translate(0px,-10px);   -o-transform:translate(0px,10px);   transform:translate(0px,-10px); }

Efek Fade Out

.demo-2 {   -webkit-transition:opacity .5s ease-out;   -moz-transition:opacity .5s ease-out;   -ms-transition:opacity .5s ease-out;   -o-transition:opacity .5s ease-out;   transition:opacity .5s ease-out; }  .demo-2:hover {   opacity:0.2; }

Efek Fade In

.demo-3 {   -webkit-transition:opacity .5s ease-out;   -moz-transition:opacity .5s ease-out;   -ms-transition:opacity .5s ease-out;   -o-transition:opacity .5s ease-out;   transition:opacity .5s ease-out;   opacity:0.2; }  .demo-3:hover {   opacity:1; }

Efek Rotasi

.demo-4 {   -webkit-transition:all 0.5s ease-out;   -moz-transition:all 0.5s ease-out;   -ms-transition:all 0.5s ease-out;   -o-transition:all 0.5s ease-out;   transition:all 0.5s ease-out; }  .demo-4:hover {   -webkit-transform:rotate(360deg);   -moz-transform:rotate(360deg);   -ms-transform:rotate(360deg);   -o-transform:rotate(360deg);   transform:rotate(360deg); }

Efek Membesar

.demo-5 {   -webkit-transition:all 0.5s ease-out;   -moz-transition:all 0.5s ease-out;   -ms-transition:all 0.5s ease-out;   -o-transition:all 0.5s ease-out;   transition:all 0.5s ease-out; }  .demo-5:hover {   -webkit-transform:scale(2,2);   -moz-transform:scale(2,2);   -ms-transform:scale(2,2);   -o-transform:scale(2,2);   transform:scale(2,2); }

Efek Skew

.demo-6 {   -webkit-transition:all .5s ease-out;   -moz-transition:all .5s ease-out;   -ms-transition:all .5s ease-out;   -o-transition:all .5s ease-out;   transition:all .5s ease-out; }  .demo-6:hover {   -webkit-transform:skew(30deg,20deg);   -moz-transform:skew(30deg,20deg);   -ms-transform:skew(30deg,20deg);   -o-transform:skew(30deg,20deg);   transform:skew(30deg,20deg); }

Sumber https://www.dte.web.id/