Question

所以我想创建一个硬币翻转动画，我试过的是：

＆＃13;

@import "compass";

body {
    background-color: #edebc4;
}
h1 {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    font-family: arial;
    text-transform: uppercase;
}
.flip-container {
    position: absolute;
    perspective: 1000;
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
    /* flip the pane when hovered */
    &:hover .flipper, 
    &.hover .flipper {
        transform: rotateY(180deg);
    }
    &, 
    .front, 
    .back {
        @include border-radius(100px);
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    /* flip speed goes here */
    .flipper {
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative;
        /* hide back of pane during swap */
        .front, .back {
            backface-visibility: hidden;

            position: absolute;
            top: 0;
            left: 0;
        }
        /* front pane, placed above back */
        .front {
            z-index: 2;
            /* for firefox 31 */
            transform: rotateY(0deg);
        }
        /* back, initially hidden pane */
        .back {
            transform: rotateY(180deg);
        }
    }/*.flipper*/
}/*.flip-container*/

＆＃13;

<h1>Coin flip</h1>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <img src="//lorempicsum.com/futurama/100/100/1" alt="" />
        </div>
        <div class="back">
            <img src="//lorempicsum.com/futurama/100/100/2" alt="" />
        </div>
    </div>
</div>

＆＃13;

由于某些原因，它不能在我的服务器或jsfiddle上工作。更有趣的是，它确实适用于codepen - http://codepen.io/mbrillaud/pen/jPdjmm

示例jsfiddle：https://jsfiddle.net/r0xpoqmn/

可能是什么原因？

Answer 1

笔样式为SCSS。单击“编译为CSS”并复制已编译的代码。当然，您还需要更正图片路径，然后切换//

的http://

SCSS是SASS的语法之一，它是一个CSS预处理器，它通过“嵌套”和“变量”等功能改进了样式代码的可能性。

工作版：link

Answer 2

您的服务器没有安装指南针，如果您删除指南针并更新图像src以使用http：//而不是//您将看到它半工作。

要修复此问题，请在服务器上安装指南针http://compass-style.org/

Answer 3

你的JSFiddle示例不起作用的原因是因为新的 Fiddle 默认为CSS。由于提供的样式表是使用CSS预处理器语言编写的，因此您需要将CSS面板设置为解释SCSS。

单击面板右上角的齿轮，选择“SCSS”作为语言，然后粘贴代码笔中的SCSS代码。

差不多......

要使此功能正常运行，您需要执行以下操作之一：

删除@import "compass";行并包含缺少的mixins。（见演示）。

或
修复导入并将正确的路径添加到CDN或本地文件。

╔═══════════════╗ ║ JSFiddle Demo ║ ╚═══════════════╝

CSS Coin翻转动画

3 个答案:

差不多......