Question

我正在尝试创建一个翻转效果，其中div的内容会发生变化，但无法弄清楚文本在几秒钟后消失的原因。

我添加了背面可见性：隐藏但没有用！

HTML

<div class="tweets">
<div class="front">
    This is the front
</div>
<div class="back">
    Back this is
</div>
</div>

CSS

.tweets{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 2s;
    -webkit-transition: transform 2s;
    transition-delay:0s;
     -webkit-transition-delay:0s;
    background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
    background-size:cover;
}
.tweets.flipped{
    transform: rotateY( 180deg );
    -webkit-transform: rotateY( 180deg );
    background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
    background-size:cover;
}
.back{
     transform: rotateY( 180deg );
     -webkit-transform: rotateY( 180deg );
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.front{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
 }

有人可以帮忙吗？

Answer 1

我认为这正是您所寻找的，我创建了220px的方块（根据您的要求进行更改），其中包含您作为背景链接的图像。

JSFiddle

<强> CSS

.flip-container {
    position:relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
.flip-container:hover .flipper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    filter: FlipH;
    -moz-filter: FlipH;
    -ms-filter:"FlipH";
}
.flip-container, .front, .back {
    width: 220px;
    height: 220px;
}
.flipper {
    -webkit-transition: 0.8s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.8s;
    -ms-transform-style: preserve-3d;
    -moz-transition: 0.8s;
    -moz-transform-style: preserve-3d;
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg') no-repeat;
    background-size:100% 100%;
    color:red;
}

.front:hover {
    transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
}
.back {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    filter: FlipH;
    -ms-filter: FlipH;
}
.front-title {
font-size:20px;
text-align:center;
} 
.back-title {
font-size:25px;
text-align:center;
}

<强> HTML

<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <div class="front-title">I am front Text</div>
        </div>
        <div class="back">
            <div class="back-title">I am text behind </div>
        </div>
    </div>
</div>

用背景在CSS3上翻转瓷砖

1 个答案: