0

CSS3 を使用して 3D カード反転効果を作成しました。この効果はhttp://css3.bradshawenterprises.com/flip/と非常によく似ています 。残念ながら、Mac OS を使用している人がこのページにアクセスすると、背面しか見えず、間違った方向に回転しているようです。

これが私が使用しているCSSです。

#f1_container {
    perspective: 1000;
    -webkit-perspective: 1000;    
}

#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.0s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1.0s ease-in-out;
    padding-bottom: 10px;
}

#f1_container.hover #f1_card {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.f1_face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: rgb(247, 247, 247);
    box-shadow: 0px 5px 15px 5px black;
    z-index: 10;
}

.f1_face.f1_back {
    display: block;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    box-sizing: border-box;
    padding-top: 10px;    
    color: rgb(255, 255, 255);
    text-align: center;
    background-color: rgb(247, 247, 247);
}

例については、上でリンクしたページを参照してください。

4

3 に答える 3

1

いくつかの変更を行い、更新された Css を追加しました。Chrome でも同じように表示されます。-webkit-ブラウザ固有のクロムとサファリで使用したいだけの場合は、テキストが真ん中にある場合は、align-items:center以下の画像とコードを確認してください。

カードのテキストを反転

#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.0s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1.0s ease-in-out;
    padding-bottom: 10px;
}

#f1_container.hover #f1_card {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.f1_face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: rgb(247, 247, 247);
    box-shadow: 0px 5px 15px 5px black;
    z-index: 10;
}

.f1_face.f1_back {
    display: flex;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    box-sizing: border-box;
    padding-top: 10px;    
    color: rgb(255, 255, 255);
    text-align: center;
    background-color: rgb(247, 247, 247);
    justify-content: flex-end;
    align-items: flex-end;
}

.f1_face.f1_back p{
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);

}

于 2019-08-01T14:16:57.003 に答える