0
Safari問題:它正在減少一半並翻轉。 IE問題:它翻轉並仍然顯示卡正面的鏡像而不是背面。翻轉盒動畫適用於除Safari和IE以外的所有瀏覽器
我複製從這個博客的代碼:https://davidwalsh.name/css-flip
作品爲他的網站,但不是我的。
/******
FLIP BOXES
********/
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
}
\t .flip-container:hover .flipper,
.flip-container.hover .flipper {
\t \t -webkit-transform: rotateY(180deg);
\t \t -moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
\t \t transform: rotateY(180deg);
\t }
.flip-container, .front, .back {
\t width: 100%;
\t height: 250px;
}
.flipper {
\t -webkit-transition: 1.0s;
\t -webkit-transform-style: preserve-3d;
\t -moz-transition: 1.0s;
\t -moz-transform-style: preserve-3d;
-o-transition: 0.6s;
\t -o-transform-style: preserve-3d;
\t transition: 1.0s;
\t transform-style: preserve-3d;
\t position: relative;
}
.front, .back {
\t -webkit-backface-visibility: hidden;
\t -moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
\t backface-visibility: hidden;
\t position: absolute;
\t top: 0;
\t left: 0;
}
.front{
\t background: url(http://www.../wp-content/uploads/pic.jpg) 0 0 no-repeat;
background-size:cover;
\t z-index: 2;
}
.front h2.flipbox-heading {
position:relative;
top:40%;
text-align:center;
margin:0 auto;
color:#fff;
}
.back {
\t -webkit-transform: rotateY(180deg);
\t -moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
\t transform: rotateY(180deg);
\t background: #2a3386;
}
.back-title {
\t font-weight: bold;
\t color: #000;
\t position: absolute;
\t top: 20px;
\t left: 0;
\t right: 0;
\t text-align: center;
\t font-size: 30px;
}
.back-description p{
font-weight: bold;
position: absolute;
\t top: 80px;
\t left: 0;
\t right: 0;
\t text-align: center;
color:#000;
}
.back a {
position:relative;
top:180px;
text-align:center;
}
.back a button:hover {cursor:pointer;}
.front::before {
\t content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(42,51,134, .3);
}
<div class="flip-container">
<div class="flipper">
<div class="front col-01">
<h2 class="flipbox-heading">Networking</h2>
</div>
<div class="back">
<div class="back-title">Networking</div>
<div class="back-description">
<p>Most effective manufacturer/distributor networking opportunities in industry</p>
</div>
<a href="#Learn More"><button class="flip-button">Button Text</button></a>
</div>
</div>
您可能想要添加一些代碼。正如現在所寫,這只是一個評論,而不是一個答案。 – GhostCat