Блог

Главная - Вопросы по программированию - Создайте полноэкранный кубический слайдер, используя чистый html css

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

#html #css #slider #css-transforms #slide

#HTML #css #слайдер #css-преобразования #слайд

Вопрос:

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

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

Ответ №1:

Вы этого хотите ??.. я добавлю описание, как только вы его примете. Спасибо

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

Комментарии:

1. да, я хочу такой полноэкранный режим, но он не катится, как кубик. при прокатке, особенно 3 и 4, нет, это не похоже на кости, братан, смотри пример codepen, я хочу то же самое, что и в полноэкранном режиме, спасибо

2. @sayalok codepen.io/Xenio/pen/eXvmvq проверьте эту ссылку. Я также обновил свой ответ. пожалуйста, проверьте. Спасибо

3. действительно спасибо, что вы можете себе позволить, но можете ли вы сделать это просто на всю сцену

4. чтобы он выглядел как куб, он должен быть квадратным. если я возьму 100% ширины, тогда высота, которую я не могу взять 100%, не останется квадратной справа.. я пытался сделать его полноэкранным, но мне не удалось добиться того, чего вы хотите. извините

5. да, вы правы, я тоже много раз пытался, но не смог с этим справиться. это невозможно, возможно b. но спасибо за то, что вы позволили

Ответ №2:

Лучший способ решить эту проблему — использовать модули viveport.

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

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