-webkit-transform:rotateY在Mac OS(在Chrome中)上失败 [英] -webkit-transform: rotateY fails on Mac OS (in Chrome)

问题描述

我使用CSS3创建了3D卡翻转效果.此效果与

 #f1_card {宽度:100％;高度:100％;转换样式:preserve-3d；过渡:转换1.0s缓入缓出；-webkit-transform-style:保留3d;-webkit-transition:-webkit-transform 1.0s缓入；padding-bottom:10px;}#f1_container.hover#f1_card {变换:rotateY(180deg);-webkit-transform:rotateY(180deg);}.f1_face {位置:绝对；宽度:100％;高度:100％;背面可见性:隐藏；-webkit-backface-visibility:隐藏；background-color:rgb(247，247，247);框阴影:0px 5px 15px 5px黑色；z索引:10；}.f1_face.f1_back {显示:flex;变换:rotateY(180deg);-webkit-transform:rotateY(180deg);框大小:border-box；padding-top:10像素；颜色:rgb(255，255，255);文本对齐:居中；background-color:rgb(247，247，247);证明内容:flex-end;align-items:flex-end;}.f1_face.f1_back p {-webkit-transform:旋转(180deg);变换:rotate(180deg);}  

I created a 3D card flipping effect using CSS3. This effect is very similar to http://css3.bradshawenterprises.com/flip/ Unfortunately, it seems that when someone using Mac OS visits this page, they only see the back face, and it is rotated in the wrong direction.

Here is the CSS I am using.

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

For an example please see the page I linked above.

解决方案

I have done some changes and added updated Css, It is showing same way in chrome. If you just want to do it for chrome and safari use -webkit- for browser speicific.If your text is in the middle then you can make align-items:center Please check below image and code.

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

}

这篇关于-webkit-transform:rotateY在Mac OS(在Chrome中)上失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！