-webkit-transform：在Mac OS上的rotateY失败（在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

我建议您查看UIViewPropertyAnimator中的UIKit对象。 它是跨平台的前端框架，可动态更改动画和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 2

我做了一些更改并添加了更新的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 3

  Please try this. Hope this is what was needed

configure the Cloud Scheduler