Make a full screen cube slider2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceUsing jQuery to center a DIV on the screenHow to make div not larger than its contents?How to make a div 100% height of the browser window?Make the cursor a hand when a user hovers over a list itemHow do I make a placeholder for a 'select' box?Make body have 100% of the browser heightWhat is the difference between “screen” and “only screen” in media queries?How to make Twitter Bootstrap menu dropdown on hover rather than clickControlling CSS cube rotation(transform) and extracting values from 3d matrix
Having the player face themselves after the mid-game
What is the population of Romulus in the TNG era?
Would an aboleth's Phantasmal Force lair action be affected by Counterspell, Dispel Magic, and/or Slow?
Vocabulary for giving just numbers, not a full answer
Why does Solve lock up when trying to solve the quadratic equation with large integers?
Which classes are needed to have access to every spell in the PHB?
Has a sovereign Communist government ever run, and conceded loss, on a fair election?
Damage bonus for different weapons
Virginia employer terminated employee and wants signing bonus returned
How does Ehrenfest's theorem apply to the quantum harmonic oscillator?
Do I really need to have a scientific explanation for my premise?
Possible to detect presence of nuclear bomb?
PTIJ: Why does only a Shor Tam ask at the Seder, and not a Shor Mu'ad?
What is better: yes / no radio, or simple checkbox?
Trig Subsitution When There's No Square Root
Why couldn't the separatists legally leave the Republic?
Is it possible to avoid unpacking when merging Association?
This Alpine town?
When Schnorr signatures are part of Bitcoin will it be possible validate each block with only one signature validation?
What is Tony Stark injecting into himself in Iron Man 3?
I can't die. Who am I?
Specifying a starting column with colortbl package and xcolor
Finitely many repeated replacements
How many characters using PHB rules does it take to be able to have access to any PHB spell at the start of an adventuring day?
Make a full screen cube slider
2019 Community Moderator ElectionMake a div fill the height of the remaining screen spaceUsing jQuery to center a DIV on the screenHow to make div not larger than its contents?How to make a div 100% height of the browser window?Make the cursor a hand when a user hovers over a list itemHow do I make a placeholder for a 'select' box?Make body have 100% of the browser heightWhat is the difference between “screen” and “only screen” in media queries?How to make Twitter Bootstrap menu dropdown on hover rather than clickControlling CSS cube rotation(transform) and extracting values from 3d matrix
0
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. If i increase the width of cube section but the whole cube system is broken i need to make a full page width cube slider so any help would be very appreciateable. Thanks in advance
html css css3 slider css-transforms
asked Mar 7 at 4:50
sayaloksayalok
3271317
add a comment |
0
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. If i increase the width of cube section but the whole cube system is broken i need to make a full page width cube slider so any help would be very appreciateable. Thanks in advance
html css css3 slider css-transforms
asked Mar 7 at 4:50
sayaloksayalok
3271317
add a comment |
0
0
0
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. If i increase the width of cube section but the whole cube system is broken i need to make a full page width cube slider so any help would be very appreciateable. Thanks in advance
html css css3 slider css-transforms
asked Mar 7 at 4:50
sayaloksayalok
3271317
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. If i increase the width of cube section but the whole cube system is broken i need to make a full page width cube slider so any help would be very appreciateable. Thanks in advance
.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>.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>html css css3 slider css-transforms
html css css3 slider css-transforms
asked Mar 7 at 4:50
sayaloksayalok
3271317
asked Mar 7 at 4:50
sayaloksayalok
3271317
edited Mar 7 at 6:57
sayalok
asked Mar 7 at 4:50
sayaloksayalok
3271317
asked Mar 7 at 4:50
sayaloksayalok
3271317
asked Mar 7 at 4:50
sayaloksayalok
3271317
3271317
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
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>answered Mar 7 at 5:36
Xenio GraciasXenio Gracias
1,2621511
yeah i want this kind of full screen but its not rolling like a dice or cube . when rolling especially 3 and 4 no its not like dice bro see the codepen example i want same things it full screen thanks
– sayalok
Mar 7 at 6:39
1
@sayalok codepen.io/Xenio/pen/eXvmvq check this link. I have also updated my answer. please check. thanks
– Xenio Gracias
Mar 7 at 7:36
really thanks for ur afford but can u make it just full scene
– sayalok
Mar 7 at 9:40
it to look like a cube it has to be a square. if i take 100% width then height i cannot take 100% it will not remain as square right.. i tried making it full screen but i was not able to achieve what you want. sorry
– Xenio Gracias
Mar 7 at 12:30
yeah you are right, I have also tried lot of time but failed to manage it. its not possible may b . but thanks for your afford
– sayalok
2 days ago
add a comment |
0
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>answered yesterday
valsvals
45.6k857109
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55036311%2fmake-a-full-screen-cube-slider%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>answered Mar 7 at 5:36
Xenio GraciasXenio Gracias
1,2621511
yeah i want this kind of full screen but its not rolling like a dice or cube . when rolling especially 3 and 4 no its not like dice bro see the codepen example i want same things it full screen thanks
– sayalok
Mar 7 at 6:39
1
@sayalok codepen.io/Xenio/pen/eXvmvq check this link. I have also updated my answer. please check. thanks
– Xenio Gracias
Mar 7 at 7:36
really thanks for ur afford but can u make it just full scene
– sayalok
Mar 7 at 9:40
it to look like a cube it has to be a square. if i take 100% width then height i cannot take 100% it will not remain as square right.. i tried making it full screen but i was not able to achieve what you want. sorry
– Xenio Gracias
Mar 7 at 12:30
yeah you are right, I have also tried lot of time but failed to manage it. its not possible may b . but thanks for your afford
– sayalok
2 days ago
add a comment |
0
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>answered Mar 7 at 5:36
Xenio GraciasXenio Gracias
1,2621511
yeah i want this kind of full screen but its not rolling like a dice or cube . when rolling especially 3 and 4 no its not like dice bro see the codepen example i want same things it full screen thanks
– sayalok
Mar 7 at 6:39
1
@sayalok codepen.io/Xenio/pen/eXvmvq check this link. I have also updated my answer. please check. thanks
– Xenio Gracias
Mar 7 at 7:36
really thanks for ur afford but can u make it just full scene
– sayalok
Mar 7 at 9:40
it to look like a cube it has to be a square. if i take 100% width then height i cannot take 100% it will not remain as square right.. i tried making it full screen but i was not able to achieve what you want. sorry
– Xenio Gracias
Mar 7 at 12:30
yeah you are right, I have also tried lot of time but failed to manage it. its not possible may b . but thanks for your afford
– sayalok
2 days ago
add a comment |
0
0
0
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>answered Mar 7 at 5:36
Xenio GraciasXenio Gracias
1,2621511
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>.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>.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>answered Mar 7 at 5:36
Xenio GraciasXenio Gracias
1,2621511
edited Mar 7 at 8:57
answered Mar 7 at 5:36
Xenio GraciasXenio Gracias
1,2621511
answered Mar 7 at 5:36
Xenio GraciasXenio Gracias
1,2621511
answered Mar 7 at 5:36
Xenio GraciasXenio Gracias
1,2621511
1,2621511
yeah i want this kind of full screen but its not rolling like a dice or cube . when rolling especially 3 and 4 no its not like dice bro see the codepen example i want same things it full screen thanks
– sayalok
Mar 7 at 6:39
1
@sayalok codepen.io/Xenio/pen/eXvmvq check this link. I have also updated my answer. please check. thanks
– Xenio Gracias
Mar 7 at 7:36
really thanks for ur afford but can u make it just full scene
– sayalok
Mar 7 at 9:40
it to look like a cube it has to be a square. if i take 100% width then height i cannot take 100% it will not remain as square right.. i tried making it full screen but i was not able to achieve what you want. sorry
– Xenio Gracias
Mar 7 at 12:30
yeah you are right, I have also tried lot of time but failed to manage it. its not possible may b . but thanks for your afford
– sayalok
2 days ago
add a comment |
yeah i want this kind of full screen but its not rolling like a dice or cube . when rolling especially 3 and 4 no its not like dice bro see the codepen example i want same things it full screen thanks
– sayalok
Mar 7 at 6:39
1
@sayalok codepen.io/Xenio/pen/eXvmvq check this link. I have also updated my answer. please check. thanks
– Xenio Gracias
Mar 7 at 7:36
really thanks for ur afford but can u make it just full scene
– sayalok
Mar 7 at 9:40
it to look like a cube it has to be a square. if i take 100% width then height i cannot take 100% it will not remain as square right.. i tried making it full screen but i was not able to achieve what you want. sorry
– Xenio Gracias
Mar 7 at 12:30
yeah you are right, I have also tried lot of time but failed to manage it. its not possible may b . but thanks for your afford
– sayalok
2 days ago
yeah i want this kind of full screen but its not rolling like a dice or cube . when rolling especially 3 and 4 no its not like dice bro see the codepen example i want same things it full screen thanks
– sayalok
Mar 7 at 6:39
yeah i want this kind of full screen but its not rolling like a dice or cube . when rolling especially 3 and 4 no its not like dice bro see the codepen example i want same things it full screen thanks
– sayalok
Mar 7 at 6:39
1
1
@sayalok codepen.io/Xenio/pen/eXvmvq check this link. I have also updated my answer. please check. thanks
– Xenio Gracias
Mar 7 at 7:36
@sayalok codepen.io/Xenio/pen/eXvmvq check this link. I have also updated my answer. please check. thanks
– Xenio Gracias
Mar 7 at 7:36
really thanks for ur afford but can u make it just full scene
– sayalok
Mar 7 at 9:40
really thanks for ur afford but can u make it just full scene
– sayalok
Mar 7 at 9:40
it to look like a cube it has to be a square. if i take 100% width then height i cannot take 100% it will not remain as square right.. i tried making it full screen but i was not able to achieve what you want. sorry
– Xenio Gracias
Mar 7 at 12:30
it to look like a cube it has to be a square. if i take 100% width then height i cannot take 100% it will not remain as square right.. i tried making it full screen but i was not able to achieve what you want. sorry
– Xenio Gracias
Mar 7 at 12:30
yeah you are right, I have also tried lot of time but failed to manage it. its not possible may b . but thanks for your afford
– sayalok
2 days ago
yeah you are right, I have also tried lot of time but failed to manage it. its not possible may b . but thanks for your afford
– sayalok
2 days ago
add a comment |
0
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>answered yesterday
valsvals
45.6k857109
add a comment |
0
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>answered yesterday
valsvals
45.6k857109
add a comment |
0
0
0
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>answered yesterday
valsvals
45.6k857109
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>.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>.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>answered yesterday
valsvals
45.6k857109
answered yesterday
valsvals
45.6k857109
answered yesterday
valsvals
45.6k857109
answered yesterday
valsvals
45.6k857109
45.6k857109
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55036311%2fmake-a-full-screen-cube-slider%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
