Question

我是CSS的新手，我正在努力让一些div在x轴上进行卡片翻转。我已经能够成功地使用一些基本的html和CSS。我遇到的问题是让卡正确翻转。目前，当您将鼠标从包装盒中取出时，它会立即恢复到正面而不会翻转。在我的研究中，我已经看到它注意到javascript / jquery是实现这一点所必需的，但是我也看到了它没有任何javascript / jquery正常工作的例子。我宁愿先学习它。那么我怎样才能让div正确地“翻转”呢？

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

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

请参阅演示 - Flip box 更多Html css web codes

Answer 2

你需要在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/

Answer 3

就是这样，但我可以说它有问题。所以我假设JS开始了。

<强> HTML

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

Flippy Buttons JSFiddle

css卡翻转效果，不翻转

3 个答案: