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

Я пытался создать ползунок полноэкранного куба, я взял этот пример из codepen пример.

.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 slider css-transforms slide
07.03.2019 05:50
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
406
2

Ответы 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>

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

— sayalok 07.03.2019 07:39

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

— Xenio Gracias 07.03.2019 08:36

действительно спасибо за ваши деньги, но вы можете сделать это просто полной сценой

— sayalok 07.03.2019 10:40

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

— Xenio Gracias 07.03.2019 13:30

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

— sayalok 08.03.2019 07:38
07.03.2019 06:36

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

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

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

Другие вопросы по теме

Как мне загрузить CSS для flatpickr, когда я использую npm для его установки в Laravel?
Отображение самого скрытого элемента, а затем перемещение с помощью перехода
Полноразмерное фоновое изображение с использованием CSS на мобильных устройствах
Спиннер загрузки не отображается внизу бесконечной прокрутки
Как выводить данные в таблицу в зависимости от того, какой вариант был выбран
Как добавить больше функциональности в одну кнопку
Как я могу изменить «порядок кликов» для перекрывающихся кнопок?
Связывание RFID-меток с модулем MFRC522 в Python Flask для доступа к базе данных учащихся с помощью Raspberry pi3
Какая часть кода управляет состоянием наведения подменю
В пользовательской точечной навигации slick.js ширина активной не совпадает

Похожие вопросы

Я не могу понять, почему этот простой Javascript не будет работать. Кто-нибудь может пролить свет?
Борьба с получением значений массива в PHP
Как я могу условно отформатировать свою HTML-таблицу?
Отображение самого скрытого элемента, а затем перемещение с помощью перехода
Как я могу настроить автоматическую отправку электронной почты мне при нажатии на ссылку <a href>
Анимированный список индикаторов прогресса. Счетчик считает только последний aria-valuenow
Спиннер загрузки не отображается внизу бесконечной прокрутки
POST файл с командой curl
Перебрать каждое изображение в папке на стороне сервера
ASP.NET WebForms и Bootstrap 4.1.3 Панель навигации не работает