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

Question

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ł  ?

Answer 1

Prosze ;)

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Comments

Dzięki, już próbuje coś zdziałać :)

Answer 2

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 ?

Answer 3

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);
}

 

Comments

Witam. Poszukaj pod hasłem css flip book effect