Сделайте полноэкранный слайдер кубов, используя чистый HTML CSS

Question

Я пытался создать полноэкранный слайдер кубов. Я взял этот пример из 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>

Выше предоставлен мой модифицированный код, который я пробовал до сих пор. Если я увеличу ширину секции куба, вся система кубов будет нарушена, но мне нужно сделать ползунок куба полной ширины экрана. любая помощь будет очень заметной. Заранее спасибо

Answer 1

Лучший способ решить эту проблему - использовать единицы viweport.

Используя vmin, вы всегда будете видеть куб, оставляя пустое пространство в большем измерении viweport.

Если выесли хотите наоборот, вы можете использовать vmax (замените все вхождения vmin на 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>

Answer 2

Это так, как вы хотите? .. Я добавлю описание, как только вы примете это. спасибо

.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>