Pozycjonowanie dwóch elementów blokowych w CSS

Question

A więc problem polega na tym że chcę u pozycjonować dwa div,y odpowiednio na prawej i lewej połowie strony. Sytuacja skomplikowała się w momencie kiedy zacząłem je animować. Aby animacja była w pełni funkcjonalna potrzebuję dwóch takich samych pojemników ze zdjęciami po obydwu stronach, ponadto w tych pojemnikach potrzebuję mieć dwie warstwy jedną nad i jedną wy maskowaną podwarstwę o dokładnie takiej samej wielkości co jej odpowiednik w kontenerze (animacją będzie wizytówka, która obracając się po obydwu stronach ma różne informacje). Próbowałem zrobić dwa pojemniki z position: relative, a w nich umieścić dwa kolejne pojemniki o odpowiednich wymiarach z position: absolute wszystko działało do momentu kiedy nie zacząłem pozycjonować pojemnika który był po prawej stronie, po dodaniu position: absolute wyrzucało go poza okno przeglądarki pozostawiając jedynie tło, które ustaliłem dla jego rodzica. Dosyć rzadko mam okazję programować w web-designie dlatego zwracam się z uprzejmą prośbą do bardziej doświadczonych kolegów :)

 

Link do codepena: https://codepen.io/kapiko112/pen/WmwWMG

Answer 1

Witam

animacją będzie wizytówka, która obracając się po obydwu stronach ma różne informacje

Nie wiem czy dobrze zrozumiałem ale czy chcesz osiągnąć taki efekt?

Comments

Tak animacja będzie wyglądać bardzo podobnie, tyle że rotacja powinna być względem osi Y a nie X. Problem polega na odpowiednim pozycjonowaniu obydwu elementów z float: left i float: right po dodaniu position absolute do elementów w nich zawartych.

---

Spróbuj w oddzielnym projekcie zrobić coś takiego jak na filmie tylko ustaw rotateY zamiast rotateX - ogólnie sprawdzaj różne możliwości, a gdy to nie będzie Ci wychodziło zrób kropka w kropkę jak na filmiku i zrozum co tam się dzieje, następnie przerób ten przykład pokazany na filmie aby obracał się względem osi Y - i gdy to będziesz rozumiał - wtedy wróć do swojego projektu. Tak na marginesie to ie widzę aby na filmie było używane float(którego nie powinno się używać ponieważ jest przestarzałe (https://www.quora.com/Should-the-float-attribute-be-avoided-in-modern-CSS-and-why) i istnieją inne lepsze zamienniki). Ogólnie spróbuj na podstawie tego filmiku coś sam wykombinować, jeśli nie dasz rady napisz spróbuję pomóc(ale nic nie obiecuje)