• 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.

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,388 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,460 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,540 p.)
Witam. Poszukaj pod hasłem css flip book effect

Podobne pytania

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

93,327 zapytań

142,323 odpowiedzi

322,396 komentarzy

62,656 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...