• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS Obrót elementu na stronie, względem jego krawędzi.

Object Storage Arubacloud
0 głosów
1,149 wizyt
pytanie zadane 10 czerwca 2017 w HTML i CSS przez michal Mądrala (5,560 p.)
Witam na filmie https://www.youtube.com/watch?v=UGDpApjsjjI jest fajnie opisane jak wykonac obrot elementu z perspektywa. Element ten obraca sie wzgledem własnej osi symetrii, a jak przesunąć oś obrotu na jego lewą krawędź? Tak by obracał się jak kartki w książce. Czy ma ktoś jakiś pomysł  ?

3 odpowiedzi

0 głosów
odpowiedź 10 czerwca 2017 przez rafal.budzis Szeryf (85,260 p.)
komentarz 10 czerwca 2017 przez michal Mądrala (5,560 p.)
Dzięki, już próbuje coś zdziałać :)
0 głosów
odpowiedź 14 czerwca 2017 przez michal Mądrala (5,560 p.)
Mam jeszcze pytanko czy ktoś wie dlaczego gdy obracam element wokół własnej osi symetrii i dodam parametr

backface-visibility: hidden to ładnie nie widać odwrotu elementu, natomiast gdy obracam element wokół jego krawędzi transform-origin: right to po obrocie na drugą stronę jeszcze przez ułamek sekundy widać tylną stronę elementu i dopiero za moment znika ?
0 głosów
odpowiedź 16 czerwca 2017 przez michal Mądrala (5,560 p.)

Dalej nie mogę się uporać z tym problemem dlatego postanowiłem podać konkretny przykład. Można zobaczyć tutaj:  http://mp66.linuxpl.info/example/  . Problem jest gdy karta przekręca się na drugą stronę, jest takie nie naturalne przejście, dodatkowo w chrome jeszcze te karty zachodzą tak dziwnie na siebie. Jeśli ktoś ma jakieś sugestie w jaki sposób można to rozwiązać to będę wdzięczny za poradę.

Kod css wygląda tak:

#box{
	margin-left: 300px;
	margin-top: 100px;
}

.left, .right
{
	width: 200px;
	height: 350px;
	display: inline-block;
	position: relative;
	perspective: 800px;
}

.left::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: red;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	transition: 3s transform linear;
	transform-origin: right;
}

#box:hover .left::after
{
	transform: rotateY(0deg);
}

.right::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: blue;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	transition: 3s transform linear;
	transform-origin: left;
}

.right::before
{
	content: '';
	width: 100%;
	height: 100%;
	position:absolute;
	background-color: black;
}

#box:hover .right::after
{
	transform: rotateY(-180deg);
}

 

komentarz 16 czerwca 2017 przez pablop76 VIP (123,120 p.)
Witam. Poszukaj pod hasłem css flip book effect

Podobne pytania

0 głosów
1 odpowiedź 1,043 wizyt
0 głosów
1 odpowiedź 392 wizyt
pytanie zadane 12 czerwca 2019 w JavaScript przez Luckyluck87 Użytkownik (660 p.)
+1 głos
1 odpowiedź 414 wizyt
pytanie zadane 8 stycznia 2021 w Matematyka, fizyka, logika przez matilogias Obywatel (1,550 p.)

92,536 zapytań

141,377 odpowiedzi

319,455 komentarzy

61,922 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...