-webkit-transform：rotateY 在 Mac OS 上失败（在 Chrome 中）

Question

我使用 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);
}

有关示例，请参阅我上面链接的页面。

Answer 1

我做了一些更改并添加了更新的 Css，它在 chrome 中的显示方式相同。如果您只想为 chrome 和 safari 使用 -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);

}

Answer 2

我建议查看UIKit 中的UIViewPropertyAnimator 对象。 它是用于跨平台、动态变化的动画和 Web 界面的前端框架（并且适用于 Apple 产品）。

let anim = UIViewPropertyAnimator(duration: 0.50, curve: .easeIn);
let angle = <whateverangle you want>

anim.addAnimations { self.view.transform = CGAffineTranform(rotationAngel: (angle * Math.PI / 180) }

<EventHandler for onHover>{ anim.startAnimation(); }
-- Then just do another one for on:not(:hover) eventhandler.

Answer 3

  Please try this. Hope this is what was needed

https://codepen.io/anon/pen/ymgpqp#anon-login