时间戳

首页 > 解决方案 > 如何在css中动画翻转运动？

html - 如何在css中动画翻转运动？

问题描述

我正在尝试使用transitioncss 为卡片制作动画，但它似乎无法正常工作。

这是源脚本：

   .paper{
        border: 0px;
        width: 100%;
        height: 100%;
        border: 0px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .pagesfront,
    .pagesback{
        background-color: #fff3d6;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform-origin: left;
        transition: transform 0.5s;
    
    }
    
    .pagesfront{
        z-index: 1;
    }
    
    .pagesback{
        z-index: 0;
    }
    
    .flipped .pagesfront,
    .flipped .pagesback{
        transform: rotateY(-180deg);
    }

在进行过渡的课程页面中是否有我遗漏的内容，或者还有其他内容？

标签： htmlcss

解决方案

我的猜测是您将类.flipped放在错误的 html 元素上。您确实意识到.pagesfront或.pagesback需要具有该类的父元素.flipped才能使翻转动画正常工作，对吗？

如果那是您的意图，请不要介意我说的话。如果您打算通过将.flipped类添加到.pagesfrontor来触发动画，则.pagesback可能需要像这样重写该 CSS 代码：

.pagesfront.flipped, 
.pagesback.flipped{
    transform: rotateY(-180deg);
}

.pagesfront/back（注意和之间没有空格.flipped。）

推荐阅读