书之间的差距不是css 3d书籍封面的大小

Question

我有这本书的封面设计使用css和现代化器：

HTML：

/* 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; }

CSS：

color:rgba(0,0,0,1);

现在行动宽度为下一个+ 1 /最后一本书是老年人。我检查更多的书籍，看到只有第一本书有正常的大小。书籍之间的差距是不同的，而不是大小

我该如何解决这个问题？

demo 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;
}

你在书类中遇到同样的问题，不同的前缀之间有不同的风格。

但是现在，对于真正的问题：当你使用这个设置时，你可以选择给这个系列提供全局视角或不变的视角。

Global pespective

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

注意透视的不同用途