-webkit-transform: rotateY fails on Mac OS (in Chrome)

问题

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.

回答1:

I would recommend looking at the UIViewPropertyAnimator object in the UIKit. It is front-end framework for cross-platform, dynamically changing animation and web interfaces (and it's attuned to Apple products).

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.

回答2:

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

}

回答3:

  Please try this. Hope this is what was needed

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

来源：https://stackoverflow.com/questions/16365899/webkit-transform-rotatey-fails-on-mac-os-in-chrome

标签

google-chrome

css3

webkit

transform