Przekształcenia 2D w CSS3 – obrót obiektu HTML (transform)

We wcześniejszym wpisie pokazałam jak stworzyć obracający się po najechaniu myszką div na przykładzie „obracającej się animowanej karty” (obrazka).

Tym razem chciałam skupić się na samym obrocie. W sumie to takie trochę uproszczenie w porównaniu do tego co pokazałam wcześniej nie mniej jednak może się komuś przydać. Można przykładowo obrócić obraz, grafikę lub zwykł DIV na stronie. Co do tła to są inne lepsze sposoby.

Obracanie obiektów wokół swojej osi

Obiektem na, którym zaprezentuje wam obrót będzie zwykły DIV.  Tak więc poniżej mamy 2 obiekty DIV. Posiadają one dokładnie takie same wymiary. Różnicą jest jednak to, że dolny został obrócony.

See the Pen rotate DIV by Aura (@Julka85) on CodePen.

Ich struktura HTML wygląda tak:

<div class="container">
  <div class="normal" > Normalny div</div>
</div>  

<div class="container">
  <div class="normal rotate"> Obrócony div</div>
</div>  

Jeśli chodzi o kod CSS

.container{
  max-width: 300px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.normal{
  height:150px; 
  width:200px;  
  border:1px solid #000;   
  background: #ccc;
}
.rotate{
  -ms-transform: rotate(20deg); 
/* IE 9 */  -webkit-transform: rotate(20deg);  
/* Safari */  transform: rotate(20deg);  /* Standard syntax */   
  border:1px solid #000;   
}

Zastanawiacie się teraz z pewnością co oznacza ta nieco tajemnicza wartość 20deg. To nic innego jak 20 stopni. Czyli obrót 20deg to obrót o 20 stopni. W przypadku obrotu przypominam, że maksymalny obrót to 360%.

Wartość w przykładzie jest dodatnia a tym samym zgodna z ruchem wskazówek zegara. Jak nie trudno się domyślić jeżeli użyli byśmy ujemnej wartości obrót odbył by się w przeciwnym kierunku.

See the Pen BaKXgrB by Aura (@Julka85) on CodePen.

Obrót może też być oczywiście wynikiem najechania na obiekt kursorem myszy (hover):

See the Pen rotate animate by Aura (@Julka85) on CodePen.

Co robi zawartość obracanego obiektu?

Jak widać na przykładach zawartość kontenera obraca się razem z nim. Dlatego też użycie tego efektu np. do uzyskania skośnego tła na stronie jest średnio udanym pomysłem. Można w ten sposób obracać jakieś pojedyncze elementy lub nie za duże grupy.

Jeżeli przesadzicie bowiem będziecie musieli obracać obiekt w obiekcie np. tekst by był prosty.

tagi:
zmiana położenia
z ukosu
krzywy element HTML
ciekawy efekt dla strony