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