Merotasi Objek Dengan Css3

Published by Concept Phone Sabtu, 28 Juli 2018

Berikut ini yaitu instruksi CSS dasar untuk menciptakan dampak rotasi pada objek:

div {   -webkit-transform:rotate(30deg); /* Safari dan Chrome */   -moz-transform:rotate(30deg);    /* Firefox */   -ms-transform:rotate(30deg);     /* IE9 */   -o-transform:rotate(30deg);      /* Opera */   transform:rotate(30deg);         /* W3C */ }

(30deg) yaitu ukuran derajat rotasi. Kamu juga dapat menuliskan nilai derajat negatif untuk memutar objek ke arah sebaliknya. Cara penerapannya dapat diletakkan secara topdown ataupun inline menyerupai ini:

Top-Down	Inline
#contoh1 { -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } ...... <div id='contoh1'> HASIL TAMPILAN </div>	<div style='-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);'> HASIL TAMPILAN </div>

HASIL TAMPILAN
DERAJAT POSITIF

HASIL TAMPILAN
DERAJAT NEGATIF

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