Question

Demo

翻转动画的核心是transform: rotateY(180deg);。当然，动画也需要transition。我从另一个使用transition: all ...;的网站复制了代码。

出于某种原因，某些属性（例如：高度，宽度）必须没有过渡。但我不知道哪些属性对于翻动动画至关重要。

任何人都知道我如何更改行transition: all ...;以保留翻转动画，同时不影响不相关的属性？

Answer 1

此页面解释了所有内容并进行了现场演示。我只需要一个简单的谷歌搜索。：）

http://desandro.github.io/3dtransforms/docs/card-flip.html

显然，诀窍是使用

过渡：变换1s;

Answer 2

在父

上:hover时更改样式

＆＃13;

.card {
    -moz-perspective: 600;
    -webkit-perspective: 600;
    perspective: 600;
    position: relative;
    height: 200px;
    width: 200px;
}
.card .side {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    box-shadow: 0 0 5px #888;
    -moz-transform-style: perserve-3d;
    -webkit-transform-style: perserve-3d;
    transform-style: perserve-3d;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.card .side.front {
    z-index: 900;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.card:hover .side.front {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.card .side.back {
    z-index: 800;
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.card:hover .side.back {
    z-index: 800;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

＆＃13;

<article class="card">
  <section class="side front">front</section>
  <section class="side back">back</section>
</article>

＆＃13;

卡翻转css变换，哪些属性需要动画？

2 个答案: