I have been trying to create a full screen cube slider i have taken this example from codepen example
.three-d-container {
width: 900px;
height: 500px;
border-radius: 3px;
position: relative;
perspective: 230px;
}
.three-d-cube {
width: 100%;
height: 100%;
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
transform: translateZ( -450px);
}
.three-d-cube .three-d-item {
width: 100%;
height: 100%;
display: block;
margin: 0;
position: absolute;
}
.three-d-cube .three-d-item img {
width: 100%;
height: 100%;
display: block;
margin: 0;
}
.three-d-item:nth-child(1) {
transform: rotateY( 0deg) translateZ( 450px);
}
.three-d-item:nth-child(2) {
transform: rotateX( 180deg) translateZ( 450px);
}
.three-d-item:nth-child(3) {
transform: rotateY( 90deg) translateZ( 450px);
}
.three-d-item:nth-child(4) {
transform: rotateY( -90deg) translateZ( 450px);
}
.three-d-item:nth-child(5) {
transform: rotateX( 90deg) translateZ( 450px);
}
.three-d-item:nth-child(6) {
transform: rotateX( -90deg) translateZ( 450px);
}
.a:checked~.three-d-cube {
transform: translateZ( -450px) rotateY( 0deg);
}
.b:checked~.three-d-cube {
transform: translateZ( -450px) rotateX( -180deg);
}
.c:checked~.three-d-cube {
transform: translateZ( -450px) rotateY( -90deg);
}
.d:checked~.three-d-cube {
transform: translateZ( -450px) rotateY( 90deg);
}
.e:checked~.three-d-cube {
transform: translateZ( -450px) rotateX( -90deg);
}
.f:checked~.three-d-cube {
transform: translateZ( -450px) rotateX( 90deg);
}
.three-d-bullet {
margin: 850px 10px 0 0;
float: left;
}
.three-d-bullet:first-child {
margin: 850px 10px 0 88px;
}
<section class="three-d-container">
<input type="radio" checked class="three-d-bullet a" name="three-d">
<input type="radio" class="three-d-bullet b" name="three-d">
<input type="radio" class="three-d-bullet c" name="three-d">
<input type="radio" class="three-d-bullet d" name="three-d">
<input type="radio" class="three-d-bullet e" name="three-d">
<input type="radio" class="three-d-bullet f" name="three-d">
<div class="three-d-cube">
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/1" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/2" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/3" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/4" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/5" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/6" alt="">
</figure>
</div>
</section>
Above i provide my modified code which i tried so far. If i increase the width of cube section the whole cube system is broken but i need to make a full screen width cube slider.
any help would be very appreciable. Thanks in advance
Is this how you want this??.. i will add description once you accept it. thanks
.title {
text-align: center;
color: #333;
font: 24px Helvetica, Arial, serif;
}
.creds {
text-align: center;
color: #666;
font: 12px Helvetica, Arial, serif;
}
.creds a {
color: #000;
text-decoration: none;
border-bottom: 1px dotted #000;
}
.three-d-container{
margin:30px auto;
width:600px;
height:600px;
border-radius: 3px;
position:relative;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
-o-perspective:1000px;
perspective:1000px;
}
.three-d-cube{
width:100%;
height:100%;
position:absolute;
-webkit-transition:-webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translateZ( -150px );
-moz-transform:translateZ( -150px );
-ms-transform:translateZ( -150px );
-o-transform:translateZ( -150px );
transform:translateZ( -150px );
}
.three-d-cube .three-d-item{
width:100%;
height:100%;
display:block;
margin:0;
position:absolute;
}
.three-d-cube .three-d-item img{
width:100%;
height:100%;
display:block;
margin:0;
}
.three-d-item:nth-child(1){
-webkit-transform:rotateY( 0deg ) translateZ( 300px );
-moz-transform:rotateY( 0deg ) translateZ( 300px );
-ms-transform:rotateY( 0deg ) translateZ( 300px );
-o-transform:rotateY( 0deg ) translateZ( 300px );
transform:rotateY( 0deg ) translateZ( 300px );
}
.three-d-item:nth-child(2){
-webkit-transform:rotateX( 180deg ) translateZ( 300px );
-moz-transform:rotateX( 180deg ) translateZ( 300px );
-ms-transform:rotateX( 180deg ) translateZ( 300px );
-o-transform:rotateX( 180deg ) translateZ( 300px );
transform:rotateX( 180deg ) translateZ( 300px );
}
.three-d-item:nth-child(3){
-webkit-transform:rotateY( 90deg ) translateZ( 300px );
-moz-transform:rotateY( 90deg ) translateZ( 300px );
-ms-transform:rotateY( 90deg ) translateZ( 300px );
-o-transform:rotateY( 90deg ) translateZ( 300px );
transform:rotateY( 90deg ) translateZ( 300px );
}
.three-d-item:nth-child(4){
-webkit-transform:rotateY( -90deg ) translateZ( 300px );
-moz-transform:rotateY( -90deg ) translateZ( 300px );
-ms-transform:rotateY( -90deg ) translateZ( 300px );
-o-transform:rotateY( -90deg ) translateZ( 300px );
transform:rotateY( -90deg ) translateZ( 300px );
}
.three-d-item:nth-child(5){
-webkit-transform:rotateX( 90deg ) translateZ( 300px );
-moz-transform:rotateX( 90deg ) translateZ( 300px );
-ms-transform:rotateX( 90deg ) translateZ( 300px );
-o-transform:rotateX( 90deg ) translateZ( 300px );
transform:rotateX( 90deg ) translateZ( 300px );
}
.three-d-item:nth-child(6){
-webkit-transform:rotateX( -90deg ) translateZ( 300px );
-moz-transform:rotateX( -90deg ) translateZ( 300px );
-ms-transform:rotateX( -90deg ) translateZ( 300px );
-o-transform:rotateX( -90deg ) translateZ( 300px );
transform:rotateX( -90deg ) translateZ( 300px );
}
.a:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY( 0deg );
-moz-transform:translateZ( -150px ) rotateY( 0deg );
-ms-transform:translateZ( -150px ) rotateY( 0deg );
-o-transform:translateZ( -150px ) rotateY( 0deg );
transform:translateZ( -150px ) rotateY( 0deg );
}
.b:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX( -180deg );
-moz-transform:translateZ( -150px ) rotateX( -180deg );
-ms-transform:translateZ( -150px ) rotateX( -180deg );
-o-transform:translateZ( -150px ) rotateX( -180deg );
transform:translateZ( -150px ) rotateX( -180deg );
}
.c:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY( -90deg );
-moz-transform:translateZ( -150px ) rotateY( -90deg );
-ms-transform:translateZ( -150px ) rotateY( -90deg );
-o-transform:translateZ( -150px ) rotateY( -90deg );
transform:translateZ( -150px ) rotateY( -90deg );
}
.d:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY( 90deg );
-moz-transform:translateZ( -150px ) rotateY( 90deg );
-ms-transform:translateZ( -150px ) rotateY( 90deg );
-o-transform:translateZ( -150px ) rotateY( 90deg );
transform:translateZ( -150px ) rotateY( 90deg );
}
.e:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX( -90deg );
-moz-transform:translateZ( -150px ) rotateX( -90deg );
-ms-transform:translateZ( -150px ) rotateX( -90deg );
-o-transform:translateZ( -150px ) rotateX( -90deg );
transform:translateZ( -150px ) rotateX( -90deg );
}
.f:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX( 90deg );
-moz-transform:translateZ( -150px ) rotateX( 90deg );
-ms-transform:translateZ( -150px ) rotateX( 90deg );
-o-transform:translateZ( -150px ) rotateX( 90deg );
transform:translateZ( -150px ) rotateX( 90deg );
}
.three-d-bullet{
margin:350px 10px 0 0;
float:left;
position: relative;
z-index: 1;
}
<section class="three-d-container">
<input type="radio" checked class="three-d-bullet a" name="three-d">
<input type="radio" class="three-d-bullet b" name="three-d">
<input type="radio" class="three-d-bullet c" name="three-d">
<input type="radio" class="three-d-bullet d" name="three-d">
<input type="radio" class="three-d-bullet e" name="three-d">
<input type="radio" class="three-d-bullet f" name="three-d">
<div class="three-d-cube">
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/1" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/2" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/3" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/4" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/5" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/6" alt="">
</figure>
</div>
</section>
The best way to solve this is to use viweport units.
Using vmin you will ensure that the cube is always visible, leaving empty space in the larger viweport dimension.
If you want the other way round, you can use vmax (replace all occurences of vmin with vmax).
.three-d-container {
width: 100%;
height: 100vh;
border-radius: 3px;
position: relative;
perspective: 230px;
}
.three-d-cube {
width: 100vmin;
height: 100vmin;
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
transform: rotateY(90deg) translateX(50vmin) rotateY(-90deg);
left: 0;
right: 0;
margin: auto;
}
.three-d-cube .three-d-item {
width: 100%;
height: 100%;
display: block;
margin: 0;
position: absolute;
}
.three-d-cube .three-d-item img {
width: 100%;
height: 100%;
display: block;
margin: 0;
}
.three-d-item:nth-child(1) {
transform: rotateY(90deg) translateX(50vmin) rotateY(90deg);
}
.three-d-item:nth-child(2) {
transform: translateX(50vmin) rotateY(-90deg);
}
.three-d-item:nth-child(3) {
transform: translateX(-50vmin) rotateY(90deg);
}
.three-d-item:nth-child(4) {
transform: translateY(50vmin) rotateX(-90deg);
}
.three-d-item:nth-child(5) {
transform: translateY(-50vmin) rotateX( 90deg);
}
.three-d-item:nth-child(6) {
transform: rotateY(90deg) translateX(-50vmin) rotateY(90deg);
}
.a:checked~.three-d-cube {
transform: rotateY(90deg) translateX(50vmin) rotateY(-90deg);
}
.b:checked~.three-d-cube {
transform: rotateY(90deg) translateX(50vmin) rotateY(-90deg) rotateX(90deg);
}
.c:checked~.three-d-cube {
transform: rotateY(90deg) translateX(50vmin) rotateY(-90deg) rotateX(-90deg);
}
.d:checked~.three-d-cube {
transform: rotateY(90deg) translateX(50vmin) rotateY(-90deg) rotateY(90deg);
}
.e:checked~.three-d-cube {
transform: rotateY(90deg) translateX(50vmin) rotateY(-90deg) rotateY(-90deg);
}
.f:checked~.three-d-cube {
transform: rotateY(90deg) translateX(50vmin) rotateY(-90deg) rotateY(180deg);
}
.three-d-bullet {
float: left;
}
<section class="three-d-container">
<input type="radio" checked class="three-d-bullet a" name="three-d">
<input type="radio" class="three-d-bullet b" name="three-d">
<input type="radio" class="three-d-bullet c" name="three-d">
<input type="radio" class="three-d-bullet d" name="three-d">
<input type="radio" class="three-d-bullet e" name="three-d">
<input type="radio" class="three-d-bullet f" name="three-d">
<div class="three-d-cube">
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/1" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/2" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/3" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/4" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/5" alt="">
</figure>
<figure class="three-d-item">
<img src="http://lorempixel.com/500/500/food/6" alt="">
</figure>
</div>
</section>
Related
This question already has answers here:
How to use jQuery to wait for the end of CSS3 transitions?
(6 answers)
Closed 6 years ago.
I've got an element that starts out with no transforms applied to it.
After an event, the following transform is applied.
transform: rotateY( -180deg );
After another event, another transform is applied.
transform: rotateZ( -15deg ) rotateY( -180deg ) translateX( 1000px ) translateY( -600px );
Everything works fine as long as the 1st transform finishes before the 2nd. However, when it doesn't the 2nd transform will make the element do a horizontal and vertical 360.
How can I prevent the card from doing any 360 ever? and/or wait until the 1st transition is completely finished before continuing.
Full code:
HTML
<div class="studyCard">
<div class="card flip">
<input class="currentCardKey" type="hidden" value="">
<input class="currentCardPlacement" type="hidden" value="">
<div class="cardFront">
<div class="cardSub">
<p style="max-height:100px;">
<span class="frontText">FrontText</span>
</p>
</div>
</div>
<div class="cardBack">
<div class="cardSub">
<p style="max-height:100px;">
<span class="backText">BackText</span>
</p>
</div>
</div>
</div>
</div>
CSS
.studyCardContainer{
position: absolute;
width: 100%;
height: 100%;
padding: 70px 0px 90px;
z-index: 10;
}
.studyCard{
margin:0 5px;
position: relative;
height: 100%;
cursor: pointer;
perspective: 2000px;
}
.card{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition-duration: .40s;
/*-o-transition-duration: .70s;
-webkit-transition-duration: .70s;
-moz-transition-duration: .70s;*/
}
.card .cardFront,.card .cardBack{
border: 1px solid #888;
background-color: #FFF;
box-shadow: 0px 2px 12px 0px rgba(0,0,0,.2);
margin: 0;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: table;
table-layout: fixed;
overflow: auto;
}
/*.card .cardFront {}*/
.card.flip{
transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
}
.card.flipped, .card .cardBack {
transform: rotateY( -180deg );
-o-transform: rotateY( -180deg );
-webkit-transform: rotateY( -180deg );
-moz-transform: rotateY( -180deg );
;
}
.card.flip,.card.flipped{
}
.card.flip.sling{
transform: rotateZ( -15deg ) rotateY( 0deg ) translateX( -1000px ) translateY( -600px );
/* -o-transform: rotateZ( -15deg ) rotateY( 0deg ) translateX( -1000px ) translateY( -600px );
-webkit-transform: rotateZ( -15deg ) rotateY( 0deg ) translateX( -1000px ) translateY( -600px );
-moz-transform: rotateZ( -15deg ) rotateY( 0deg ) translateX( -1000px ) translateY( -600px );*/
}
.card.flipped.sling{
transform: rotateZ( -15deg ) rotateY( -180deg ) translateX( 1000px ) translateY( -600px );
/* -o-transform: rotateZ( -15deg ) rotateY( -180deg ) translateX( 1000px ) translateY( -600px );
-webkit-transform: rotateZ( -15deg ) rotateY( -180deg ) translateX( 1000px ) translateY( -600px );
-moz-transform: rotateZ( -15deg ) rotateY( -180deg ) translateX( 1000px ) translateY( -600px );*/
}
.card.sling{
/*opacity: 0;*/
/*display: none;*/
transition-duration: .4s;
/* -o-transition-duration: .70s;
-webkit-transition-duration: .70s;
-moz-transition-duration: .70s;*/
}
Here was the solution I went with:
function flipCard(sideToSwitchTo){
if(sideToSwitchTo != "front" && sideToSwitchTo != "back"){
//decide for self
if($('.revealAnswerButton').is(":visible")){
sideToSwitchTo = "back";
}else{
sideToSwitchTo = "front";
}
}
if(sideToSwitchTo == "back"){
$('.card:first').removeClass('flip').addClass("flipped");
}else{
$('.card:first').removeClass("flipped").addClass('flip');
}
$('.card:first').addClass('flipTransition');
$('.card:first').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',function() {
$(this).removeClass('flipTransition');
});
}
function slingCardAway(){
if($('.card:first').hasClass('flipTransition')){
$('.card:first').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',function() {
$(this).addClass('sling');
$(this).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',function() {
$(this).remove();
});
});
}else{
$('.card:first').addClass('sling');
$('.card.sling').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',function() {
$(this).remove();
});
}
}
As noted here, you could achieve it using the following jQuery function:
$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
This, in this provided case, will wait for the '#someSelector' CSS animation to finish and then execute whatever piece of code you wish.
This is a possible duplicate to this and this.
Hello I have the following css/html code which results in a display like this:
.container{width: 200px;left:300px;top:200px;height: 300px;position: relative;}
#carousel{width: 100%;height: 100%;position: absolute;perspective:400px;}
#carousel figure{margin: 0;display: block;position: absolute;width: 200px;height: 200px;left: 10px;top: 10px;border: 1px solid black;}
#carousel figure:nth-child(1) {transform: rotate3d(0,1,0,0deg);}
#carousel figure:nth-child(2) {transform: rotate3d(0,1,0,40deg);}
#carousel figure:nth-child(3) {transform: rotate3d(0,1,0,80deg);}
#carousel figure:nth-child(4) {transform: rotate3d(0,1,0,120deg);}
#carousel figure:nth-child(5) {transform: rotate3d(0,1,0,160deg);}
#carousel figure:nth-child(6) {transform: rotate3d(0,1,0,200deg);}
#carousel figure:nth-child(7) {transform: rotate3d(0,1,0,240deg);}
#carousel figure:nth-child(8) {transform: rotate3d(0,1,0,280deg);}
#carousel figure:nth-child(9) {transform: rotate3d(0,1,0,320deg);}
<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>
The above code was derived from the below css/html code which results in a display like this:
.container {width: 210px;left:300px;top:200px;height: 140px;position: relative;perspective: 1000px;}
#carousel {width: 100%;height: 100%;position: absolute;transform-style: preserve-3d;}
#carousel figure {margin: 0;display: block;position: absolute;width: 186px;height: 116px;left: 10px;top: 10px;border: 2px solid black;}
#carousel figure:nth-child(1) { transform: rotateY( 0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY( 40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY( 80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }
<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>
My question is how can I modify the top css/html code to result in a display like the bottom code without using transform-style: preserve-3d, reason being is because preserve-3d is not compatible with internet explorer 11.
Any help would be greatly appreciated.
The original code was taken from a tutorial on this page:
3d Carousel tutorial
So the answer to this question was that since preserve-3d doesn't exist in internet explorer 11, that I move the perspective property from the parent container(container) down to the carousel itself.
See code snipped:
.container {width: 210px;left:300px;top:200px;height: 140px;position: relative;}
#carousel
{
width: 100%;
height: 100%;
position: absolute;
perspective: 1000px;
}
#carousel figure
{
margin: 0;
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
border: 2px solid black;
}
#carousel figure:nth-child(1) { transform: rotateY( 0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY( 40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY( 80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }
<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>
I have a simple card flip animation from this example: https://desandro.github.io/3dtransforms/docs/card-flip.html
I would like to turn this (or something similar to this) into a slideshow mechanic, where I don't just flip front and back, but multiple elements, together with a back and forth button.
How would this be possible without asynchronous loading the next or previous element?
http://codepen.io/anon/pen/qbvvyp
See the example HTML element:
<section class="container">
<div id="card">
<figure class="front">1</figure>
<figure class="back">2</figure>
<!--
How To Make this a Slideshow?
<figure class="back">3</figure>
<figure class="back">4</figure>
-->
</div>
</section>
I did it by using 3 separate CSS classes:
turnedLeft (turned left, -180 degrees on the Y axis)
turnedRight (turned right, 180 degrees on the Y axis)
active (facing the user, 0 degrees on the Y axis)
and 2 functions:
prevSlide: adds turnedRight to the active slide, and makes the previous element active.
nextSlide: adds turnedLeft to the active slide, and makes the next element active.
This is dynamic, and will work for any number of elements inside the "card" div!
https://jsfiddle.net/gmsitter/vuob9bnx/
HTML:
<section class="container">
<div id="card">
<figure class="active">1</figure>
<figure>2</figure>
<figure>3</figure>
<figure>4</figure>
<figure>5</figure>
</div>
</section>
<button id="previous">Previous</button>
<button id="next">Next</button>
CSS:
figure {
margin: 0px;
font-family: sans-serif;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
}
#card figure {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
background: blue;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#card .turnedLeft {
-webkit-transform: rotateY( -180deg );
-moz-transform: rotateY( -180deg );
-o-transform: rotateY( -180deg );
transform: rotateY( -180deg );
}
#card .turnedRight {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card .active {
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
}
JS:
var init = function() {
var r = 1;
var slides = $("#card").children();
$('#next').click(function(){
nextSlide();
});
$('#previous').click(function(){
prevSlide();
});
function nextSlide(){
if(r<slides.length){
var activeSlide = $(".active");
activeSlide.addClass("turnedLeft");
activeSlide.removeClass("active");
activeSlide.next().addClass("active");
r++
}
}
function prevSlide(){
if(r>1){
var activeSlide = $(".active");
activeSlide.addClass("turnedRight");
activeSlide.removeClass("active");
activeSlide.prev().addClass("active");
r--
}
}
};
window.addEventListener('DOMContentLoaded', init, false);
I've created a cube in css with perspevtive and rotateX/Y/X and with some translate I put the screen/camera into this cube (the goal is to create a skybox).
While it's ok in Chrome, Firefox seems to have some problem displaying background-image on some faces when thoses faces are to inclined.
Here is a codepen for example : http://codepen.io/poolboy/full/MaNgVK/
Html
<section class="cube-container">
<div id="cube">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</section>
Css
body {
overflow: hidden;
}
.cube-container {
width: 1024px;
height: 1024px;
position: relative;
perspective: 1000px;
margin: auto;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
/* animation: anim 20s linear infinite; */
}
#cube figure {
margin: 0;
width: 1024px;
height: 1024px;
display: block;
position: absolute;
/* border: 1px solid rgba(0,0,0,0); */
backface-visibility: hidden;
}
#cube .front { background: url(http://www.poolboy.fr/images/front.jpg) ; transform: translateZ( 511px
) rotateY( 180deg ); }
#cube .back { background: url(http://www.poolboy.fr/images/back.jpg) ; transform: rotateX( 180deg ) translateZ( 511px ) rotateZ(180deg) rotateY( 180deg ); }
#cube .right { background: url(http://www.poolboy.fr/images/right.jpg) ; transform: rotateY( 90deg ) translateZ( 511px ) rotateY( 180deg ); }
#cube .left { background: url(http://www.poolboy.fr/images/left.jpg) ; transform: rotateY( -90deg ) translateZ( 511px ) rotateY( 180deg ); }
#cube .top { background: url(http://www.poolboy.fr/images/top.jpg) ; transform: rotateX( 90deg ) translateZ( 511px ) rotateY( 180deg ); }
#cube .bottom { background: url(http://www.poolboy.fr/images/bottom.jpg) ; transform: rotateX( -90deg ) translateZ( 511px ) rotateY( 180deg ); }
#keyframes anim {
from {
transform: translateZ(511px) rotateY(0deg);
}
to {
transform: translateZ(511px) rotateY(360deg);
}
}
#cube {
/* transition: transform 1s; */
transform: translateZ(512px) rotateY(10deg);
}
Is there a way to ensure that image are correctly displayed in Firefox ?
Thanks
Firefox doesn't use transform-style, it uses -moz-transform-style. Try to replace that in your CSS code. Make sure transform-style: preserve-3d; becomes -moz-transform-style: preserve-3d;
Here is a list of Firefox extensions for CSS, use it well.
From Comment:
I took a deeper look at this, and found no issues with Hardware acceleration and that the -moz- prefix doesn't do anything, really. However, I did find that increasing the perspective did have an impact (A quite massive one on my part) on how the cube rendered. For my display (1920 x 1080), the sweet-spot of not losing quality and making it actually work was to set perspective: 1000px; to perspective: 1250px; I hope this helps, cause it certainly fixed it for me.
I need to implement a subroutine that will keep rotating them without human intervention. Would that be at all possible. It is a 3d carousel.
My code is here,.
CSS
.container {
width: 210px;
height: 140px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 1100px;
-moz-perspective: 1100px;
-o-perspective: 1100px;
perspective: 1100px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform: translateZ( -288px );
-moz-transform: translateZ( -288px );
-o-transform: translateZ( -288px );
transform: translateZ( -288px );
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
#carousel figure {
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
#carousel figure:nth-child(1) { background: hsla( 0, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(2) { background: hsla( 40, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(3) { background: hsla( 80, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(4) { background: hsla( 120, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(5) { background: hsla( 160, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(6) { background: hsla( 200, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(7) { background: hsla( 240, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(8) { background: hsla( 280, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(9) { background: hsla( 320, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(1) {
-webkit-transform: rotateY( 0deg ) translateZ( 288px );
-moz-transform: rotateY( 0deg ) translateZ( 288px );
-o-transform: rotateY( 0deg ) translateZ( 288px );
transform: rotateY( 0deg ) translateZ( 288px );
}
#carousel figure:nth-child(2) {
-webkit-transform: rotateY( 40deg ) translateZ( 288px );
-moz-transform: rotateY( 40deg ) translateZ( 288px );
-o-transform: rotateY( 40deg ) translateZ( 288px );
transform: rotateY( 40deg ) translateZ( 288px );
}
#carousel figure:nth-child(3) {
-webkit-transform: rotateY( 80deg ) translateZ( 288px );
-moz-transform: rotateY( 80deg ) translateZ( 288px );
-o-transform: rotateY( 80deg ) translateZ( 288px );
transform: rotateY( 80deg ) translateZ( 288px );
}
#carousel figure:nth-child(4) {
-webkit-transform: rotateY( 120deg ) translateZ( 288px );
-moz-transform: rotateY( 120deg ) translateZ( 288px );
-o-transform: rotateY( 120deg ) translateZ( 288px );
transform: rotateY( 120deg ) translateZ( 288px );
}
#carousel figure:nth-child(5) {
-webkit-transform: rotateY( 160deg ) translateZ( 288px );
-moz-transform: rotateY( 160deg ) translateZ( 288px );
-o-transform: rotateY( 160deg ) translateZ( 288px );
transform: rotateY( 160deg ) translateZ( 288px );
}
#carousel figure:nth-child(6) {
-webkit-transform: rotateY( 200deg ) translateZ( 288px );
-moz-transform: rotateY( 200deg ) translateZ( 288px );
-o-transform: rotateY( 200deg ) translateZ( 288px );
transform: rotateY( 200deg ) translateZ( 288px );
}
#carousel figure:nth-child(7) {
-webkit-transform: rotateY( 240deg ) translateZ( 288px );
-moz-transform: rotateY( 240deg ) translateZ( 288px );
-o-transform: rotateY( 240deg ) translateZ( 288px );
transform: rotateY( 240deg ) translateZ( 288px );
}
#carousel figure:nth-child(8) {
-webkit-transform: rotateY( 280deg ) translateZ( 288px );
-moz-transform: rotateY( 280deg ) translateZ( 288px );
-o-transform: rotateY( 280deg ) translateZ( 288px );
transform: rotateY( 280deg ) translateZ( 288px );
}
#carousel figure:nth-child(9) {
-webkit-transform: rotateY( 320deg ) translateZ( 288px );
-moz-transform: rotateY( 320deg ) translateZ( 288px );
-o-transform: rotateY( 320deg ) translateZ( 288px );
transform: rotateY( 320deg ) translateZ( 288px );
}
HTML
<h1>Carousel 1</h1>
<section class="container">
<div id="carousel">
<figure>1</figure>
<figure>2</figure>
<figure>3</figure>
<figure>4</figure>
<figure>5</figure>
<figure>6</figure>
<figure>7</figure>
<figure>8</figure>
<figure>9</figure>
</div>
</section>
Yes, it is possible. Using keyframes or steps (but with steps you'll lose transitioning).
http://jsfiddle.net/P5295/
#-webkit-keyframes spin {
0% {-webkit-transform: rotateY(0deg)}
11.1% {-webkit-transform: rotateY(-40deg)}
22.2% {-webkit-transform: rotateY(-80deg)}
33.3% {-webkit-transform: rotateY(-120deg)}
44.4% {-webkit-transform: rotateY(-160deg)}
55.5% {-webkit-transform: rotateY(-200deg)}
66.6% {-webkit-transform: rotateY(-240deg)}
77.7% {-webkit-transform: rotateY(-280deg)}
88.8% {-webkit-transform: rotateY(-320deg)}
100% {-webkit-transform: rotateY(-360deg)}
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform: translateZ( -288px );
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform .125s;
-webkit-animation: spin 20s infinite;
}
Please note, this code, and my fiddle, only work on chrome because I didn't want to write all the vendor prefixes, you can add -moz-, -o- and the unprefixed version on your own