javascript - 书籍之间的边距不是 css 3d 书籍封面中的大小

Question

我使用 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; }

现在 next+1/last book 的宽度是 elder。我检查了更多的书，发现只有第一本书有正常尺寸。书籍之间的边距不同，而不是大小

我该如何解决这个问题？

演示 Fiddle

Picture

Answer 1

首先，在这里你真的不需要 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>

注意透视的不同用法