OK, I had to add a high number for perspective, in my case 5000 since the entire page resolution is in HD. That pushes it back enough.
3d cardflip not staying within container
-
06-10-2022 - |
Pergunta
I have tried to follow this tutorial http://desandro.github.io/3dtransforms/docs/card-flip.html (second heading down, "Slide flip", here's his result http://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html) but I get one major difference from the tutorial writer - while his card stays within the box and seems to be pushed back along the Z axis, my card seems to be moved closer to the viewer and thus definately not staying within the box.
My browser is Chromium on Ubuntu Linux but I have also tried Firefox.
Here is my fiddle: http://jsfiddle.net/vASj9/2/
And here is the sample code (that I have in the fiddle)
HTML
<div id="module_1" class="sidebar debug">
<div id="module_1_cardContainer" class="cardContainer">
<div id="module_1_cardFront" class="cardFront">
<div id="module_1-slide_1" class="slide">Front</div>
</div>
<div id="module_1_cardBack" class="cardBack-horizontal">
<div id="module_1-slide_2" class="slide">Back</div>
</div>
</div>
</div>
CSS
.sidebar {
margin-top:20px;
border:solid 1px black;
width:100%;
height:300px;
position:relative;
perspective:800px;
-webkit-perspective:800px;
}
.slide {
background-color:red;
height:100%;
width:100%;
}
.cardContainer {
width:100%;
height: 100%;
position: absolute;
transform-style: preserve-3D;
-webkit-transform-style: preserve-3D;
transition: transform 1s;
-webkit-transition: -webkit-transform 1s;
transform-origin: right center;
-webkit-transform-origin: right center;
}
.cardFront, .cardBack-horizontal, .cardBack-vertical {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3D;
-webkit-transform-style: preserve-3D;
}
.cardBack-horizontal {
transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
}
.cardIsFlipped-horizontal {
transform: translateX( -100% ) rotateY( 180deg );
-webkit-transform: translateX( -100% ) rotateY( 180deg );
}
And JS for testing:
$(function () {
setTimeout(function(){
$("#module_1_cardContainer").addClass("cardIsFlipped-horizontal");
},1500);
});
Solução
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow