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 中以相同的方式显示。如果您只想为 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);

}

于 2019-08-01T14:16:57.003 回答
0

我建议查看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.
于 2019-08-01T11:32:34.000 回答
-1 
  Please try this. Hope this is what was needed

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

于 2019-07-31T09:34:17.513 回答