使用纯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

这是你想要的吗??我接受后会添加说明。谢谢

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

Answer 2

解决此问题的最佳方法是使用视口单元。

使用vmin，您将确保立方体始终可见，在较大的viweport维度中留下空白空间。

如果你想反过来，你可以使用vmax（用vmax替换所有出现的vmin）。

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