làm cho chuyển tiếp css3 xoay luôn luôn theo cùng một hướng

Question

Tôi đang cố gắng để có một mặt trước/mặt sau div lật luôn trong cùng một hướng. Tôi thực hiện lật với css và javascript, nhưng tôi có một thời gian khó suy nghĩ về làm thế nào để làm cho nó luôn luôn xoay sang phải, thay vì xoay sang phải và sau đó quay trở lại bên trái.

tôi về cơ bản sử dụng một div với css follwing

/* flip speed goes here */ 
    .flipper { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 

    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 

    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 

    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 5px; 
    margin-left: 3px; 
    z-index: 3; 
    width: 160px; 
    height: 145px; 
    display:block; 
    } 

và khi người dùng nhấp vào nó tôi thêm các lớp "búng" vào div mà thay đổi css sau:

 /* flip the pane when hovered */ 
    .flip-container.flipped .flipper { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    } 

Tôi có nên tăng luôn góc quay không? bất kỳ ý tưởng nào khác?

Đây là tình trạng hiện tại và css đầy đủ trong một fiddle

Answer 1

Tôi không nghĩ rằng nó có thể được thực hiện với biến đổi. Có thể bạn có thể làm điều đó với khung hình chính. Mã tương tự:

@-webkit-keyframes rotate1 { 
    from {-webkit-transform: rotate(0deg)} 
    to {-webkit-transform: rotate(180deg)} 
} 
@-webkit-keyframes rotate2 { 
    from {-webkit-transform: rotate(180deg)} 
    to {-webkit-transform: rotate(360deg)} 
} 

#rotable { 
    background-color: red; 
    -webkit-animation-name: rotate2; 
    -webkit-animation-duration: 3s; 
    -webkit-transform: rotate(180deg); 
} 

#rotable:hover { 
    background-color: yellow; 
    -webkit-animation-name: rotate1; 
    -webkit-animation-duration: 3s; 
} 

thực hiện tương tự như những gì bạn muốn. Chú ý rằng hướng quay luôn giống nhau.

posibility khác, trộn quá trình chuyển đổi và hình ảnh động (đối với sự thay đổi nơi chuyển tiếp sẽ đi theo hướng ngược lại ...)

.container { 
 
    perspective: 500px; 
 
} 
 

 
.test { 
 
    transform: rotate(360deg); 
 
    transition: transform 4s; 
 
} 
 

 
.container:hover .test { 
 
    transform: rotateY(180deg); 
 
    animation: turn 4s; 
 
} 
 

 
@keyframes turn { 
 
    from {transform: rotate(0deg);} 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.test { 
 
    background-color: lightblue; 
 

 
}

<div class="container"> 
 
<div class="test">TEST</div> 
 
</div>