Question

我有多个元素，每个元素都有多个CSS变换和透视图一起应用，当每个元素从全屏扩展和收缩到其原始大小/位置时，我很难让它们排成一行。要进行全屏动画，我正在使用FSM JS创建原始元素的副本来进行全屏动画。

我正在使用CSS动画调整复制的全屏元素以匹配应用于原始元素的转换。扩展似乎工作得很好但是当它缩小时我无法使动画正确排列。

非常感谢任何帮助！

希望这至少有点意义。我认为当你在https://codepen.io/anon/pen/PQQYaE看到我的代码时会很清楚。

以下是HTML的摘录：

package.yaml

这是CSS的片段：

<section>
    <div class="tiltview">
        <a class="fsm" href="#">
            <img class="img" src="https://picsum.photos/400/300?image=1073" />
        </a>
        <a class="fsm" href="#">
            <img class="img" src="https://picsum.photos/400/300?image=1080" />
        </a>
        <a class="fsm" href="#">
            <img class="img" src="https://picsum.photos/400/300?image=1075" />
        </a>
        <a class="fsm">
            <img class="img" src="https://picsum.photos/400/300?image=1079" />
        </a>
    </div>
</section>

应用变换打开和关闭全屏幕

0 个答案: