CSS卡翻转效果，不会翻转回来

我是CSS的新手，我正在努力让一些div在x轴上做一个卡片翻转。我已经能够使用一些基本的html和css成功地做到这一点。我遇到的问题是如何让牌正确翻转回来。目前，当你把鼠标从盒子上拿下来时，它会立即回到前面，而不需要翻转。在我的研究中，我看到它指出，javascript/jquery是必要的，以实现这一点，但后来我也看到的例子，它正常工作，没有任何javascript/jquery。我宁愿先学，不用。那么我怎样才能让潜水器正确地"翻转"呢?

jsfiddle代码在这里:https://jsfiddle.net/pq4juLqz/1/

html:

<table>
  <tr>
    <td>
        <div class="flip-box">
            <div class="flip-front"><input type="button" value="test_front"></div>
            <div class="flip-back"><input type="button" value="test_back"></div>
        </div>
    </td>       
  </tr>
</table>

css:

.flip-box{perspective: 1000px;
      height: 30px;
      width: 100px;}
.flip-front,.flip-back{position: absolute;
                   top: 0px;
                   left: 0px;
                   height: 30px;
                   width:100px;
                   backface-visibility: hidden;}
.flip-front{z-index:2;
        transform: rotateY(0deg);}
.flip-back{transform: rotateY(180deg);}
.flip-box:hover{transition: 0.6s;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateY(180deg);}

p{
width:100%;
height:100%;
text-align:center;
margin-top:35%;
font:400 22px helvetica;
color:White;
}
.flip{ width:240px; height:200px; margin:10px; border-radius:20px;}
.flip > .front{
	position:absolute;
	transform: perspective( 600px ) rotateY( 0deg );
	background:#151718; width:240px; height:200px; border-radius: 12px;
	backface-visibility: hidden;
	transition: transform .6s linear 0s;
}
.flip > .back{
	position:absolute;
	transform: perspective( 600px ) rotateY( 180deg );
	background: skyblue; width:240px; height:200px; border-radius: 12px;
	backface-visibility: hidden;
	transition: transform .6s linear 0s;
}
.flip:hover > .front{
	transform: perspective( 600px ) rotateY( -180deg );
}
.flip:hover > .back{
	transform: perspective( 600px ) rotateY( 0deg );
}

<div class="flip">
  <div class="back"><p>HTML</center></p></div>
  <div class="front"><p>PHP</p></div>
</div>

参见演示-翻转盒。
更多Html css网页代码

你需要在flipbox上添加transition和transform-style属性，而不是flipbox:hover。

.flip-box{transition: 0.6s;
        position: relative;
        transform-style: preserve-3d;
        }
.flip-box:hover {
  transform: rotateY(180deg);
}

试着把最后几行改成这样就行了。更新JSfiddle: https://jsfiddle.net/pq4juLqz/5/

就是这样，但是我可以看出它有bug。所以我想这就是JS发挥作用的地方。

<div class="flip-container">
    <div class="flip-buttons">
        <button type="button" class="btn-flip front">Flip Front</button>
        <button type="button" class="btn-flip back">Flip Back</button>
    </div>
</div>

CSS

.flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; } .flip-buttons, .flip-buttons > .btn-flip { width: 100px; height: 50px; } .flip-buttons { position: relative; -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-buttons > .btn-flip { position: absolute; top: 0; left: 0; border: 2px solid #3cf; background-color: #39d; color: #fafafa; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .flip-buttons > .btn-flip.front { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .flip-buttons:hover > .btn-flip.front { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-buttons > .btn-flip.back { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .flip-buttons:hover > .btn-flip.back { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
flip Buttons JSFiddle

在使用过渡进行转换时，为元素的悬停状态添加样式规则会出现一个问题:当元素被旋转90度时，该元素可能会暂时完全不可见。现在，您正在为该组件添加"悬停"状态的样式规则…
解决方案是包装旋转的div并添加添加一个样式规则到旋转的div 当悬停在包装器div:
HTML:
<table> <tr> <td> <div class="hover-listener-wrapper"> <div class="flip-box"> <div class="flip-front"><input type="button" value="test_front"></div> <div class="flip-back"><input type="button" value="test_back"></div> </div> </div> </td> </tr> </table>
CSS:
.flip-box{ perspective: 1000px; height: 30px; width: 100px; transition: 0.6s; position: relative; transform-style: preserve-3d; transform: rotateY(0deg); } .flip-box:hover{ transform: rotateY(180deg); } .flip-front,.flip-back{position: absolute; top: 0px; left: 0px; height: 30px; width:100px; backface-visibility: hidden; } .flip-front{ z-index:2; transform: rotateY(0deg); } .flip-back{ transform: rotateY(180deg); }
小提琴

相关内容

最新更新

热门标签：