javascript - 书籍之间的边距不是CSS 3D书籍封面的大小

我有使用css和modernizer的本书封面设计：

HTML：

<div class="books">
  <div id="book1" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
  <div id="book2" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
  <div id="book3" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
</div>

CSS：

/* Fallback styles */
.book {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}

.book img { vertical-align: middle; }

/*
 *  In order for this to work, you must use Modernizer
 *  to detect 3D transform browser support. This will add
 *  a "csstransforms3d" class to the HTML element.
 *
 *  Visit http://modernizr.com/ for installation instructions
 */

.csstransforms3d  .books {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.csstransforms3d  .book {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin: 0;
}

.csstransforms3d  .book img {
  position: relative;
  max-width: 100%;
}

.csstransforms3d  .book:before,
.csstransforms3d  .book:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d  .book:before {
  width: 100%;
  left: 7.5%;
  background-color: #5a2d18;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .book:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}
.csstransforms3d  #book2:before { background-color: #333; }
.csstransforms3d  #book3:before { background-color: #254053; }

现在在行动中，下一本书+ 1 /最后一本书的宽度较大。我查看了更多的书，发现只有第一本书才有正常尺寸。书籍之间的边距是不同的，而不是大小

我该如何解决这个问题？

演示Fiddle

Picture

最佳答案

首先，在这里您实际上不需要moz前缀。目前，仅使用无前缀和webkit前缀的浏览器

其次，正如Vinc199789所说，您为FF设定了一个视角，而其他视角则没有

.csstransforms3d  .books {
    -moz-perspective: 100px;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

应该

.csstransforms3d  .books {
    -webkit-perspective: 100px;
    perspective: 100px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

您在书籍课程中遇到了相同的问题，不同的前缀之间有不同的样式。

但是现在，对于真正的问题：使用此设置时，您可以选择使这本书系列具有全局性或恒定性。

全球视角

.book {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 0px;
}

.book img { vertical-align: middle; }

.books {
  -webkit-perspective: 100px;
  perspective: 100px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.book {
  position: relative;
  -webkit-transform: rotateY(-3deg);
  transform: rotateY(-3deg);
}

.book img {
  position: relative;
  max-width: 100%;
}

.csstransforms3d  .book:before,
.csstransforms3d  .book:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d  .book:before {
  width: 100%;
  left: 7.5%;
  background-color: #5a2d18;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .book:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

<div class="books">
  <div id="book1" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
  <div id="book2" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
  <div id="book3" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
</div>

不变的观点

.book {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 0px;
}

.book img { vertical-align: middle; }

.books {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.book {
  position: relative;
  -webkit-transform: perspective(100px) rotateY(-3deg);
  transform: perspective(100px) rotateY(-3deg);
}

.book img {
  position: relative;
  max-width: 100%;
}

.csstransforms3d  .book:before,
.csstransforms3d  .book:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d  .book:before {
  width: 100%;
  left: 7.5%;
  background-color: #5a2d18;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .book:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

<div class="books">
  <div id="book1" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
  <div id="book2" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
  <div id="book3" class="book">
    <img src="http://www.codedevelopr.com/assets/uploads/2012/09/PHPforWebVisualQuickStartGuide.jpg" />
  </div>
</div>

注意透视图的不同用法

关于javascript - 书籍之间的边距不是CSS 3D书籍封面的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30691277/