悬停时无法制作 3D 效果

Question

这是原版的3D书本效果。 https://jsfiddle.net/7asrgok4/

当我尝试在鼠标悬停时显示此 3D 效果时，它不适用于所有图层。

.featured-image-container {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}
.featured-image-container 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  .bg-book {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
}

.csstransforms3d  .featured-image-container:hover {
  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-right: 50px;
  cursor: pointer;
}

.csstransforms3d  .featured-image-container img {
  position: relative;
  max-width: 100%;
  height:196px;
}

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

.csstransforms3d  .featured-image-container:before {
  width: 100%;
  left: 7.5%;
  background-color: #0a0502;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .featured-image-container: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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
 <div class="featured-image-container">
   <img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
  </div>
 <div class="featured-image-container">
   <img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
 </div>
</div>

Answer 1

您是否在 div 中使用了 onmouseover 事件？你可以让它触发一个 javascript 函数来改变 div 的 class。这是一篇关于 onmouseover 事件的 W3 文章：https://www.w3schools.com/jsref/event_onmouseover.asp

Answer 2

问题是你应该只添加一个 :hover 样式，而不是用一个替换。

.featured-image-container {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}

.featured-image-container 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 .bg-book {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
}

.csstransforms3d .featured-image-container {
  position: relative;
  outline: 1px solid transparent;
  /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin-right: 50px;
  cursor: pointer;
}

.csstransforms3d .featured-image-container img {
  position: relative;
  max-width: 100%;
  height: 196px;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-1deg);
  -webkit-transform: perspective(100) rotateY(-1deg);
  outline: 1px solid transparent;
  /* Helps smooth jagged edges in Firefox */
  transition: 0.2s;
}

.csstransforms3d .featured-image-container:hover img {
  -moz-perspective: 100px;
  -moz-transform: rotateY(-5deg);
  -webkit-transform: perspective(100) rotateY(-5deg);
}

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

.csstransforms3d .featured-image-container:before {
  -moz-perspective: 100px;
  -moz-transform: rotateY(-1deg);
  -webkit-transform: perspective(100) rotateY(-1deg);
  width: 100%;
  left: 2.5%;
  background-color: #0a0502;
  box-shadow: 2px 2px 20px #333;
  transition: 0.2s;
}

.csstransforms3d .featured-image-container:hover:before {
  -moz-transform: rotateY(-5deg);
  -webkit-transform: perspective(100) rotateY(-5deg);
  left: 7.5%;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d .featured-image-container:after {
  width: 1%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(19deg) translateZ(7px) translateX(3px);
  -webkit-transform: perspective(200) rotateY(8deg) translateZ(7px) translateX(0);
  transition: 0.2s;
}

.csstransforms3d .featured-image-container:hover:after {
  width: 5%;
  -moz-transform: rotateY(19deg) translateZ(7px) translateX(3px);
  -webkit-transform: perspective(200) rotateY(8deg) translateZ(7px) translateX(3px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
  <div class="featured-image-container">
    <img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
  </div>
  <div class="featured-image-container">
    <img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
  </div>
</div>

悬停时无法制作 3D 效果

Unable to make 3D effect when Hover

html

javascript

css

modernizr