Hover时无法使3D效果

Question

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

当我尝试制作此 3D 效果以显示鼠标 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: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

问题是您应该只添加一个: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>

Answer 2

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