CSS硬币翻转动画

Question

So I want to create a coin flip animation, what I tried is:

 @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*/ 

 <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> 

For some reason it doesn't work on my server or jsfiddle. What's more interesting, it actually does work on codepen - http://codepen.io/mbrillaud/pen/jPdjmm

Example jsfiddle: https://jsfiddle.net/r0xpoqmn/

What can be reason of that?

Answer 1

The pen style is SCSS . Click on 'compile to CSS ' and copy the compiled code. Of course, you also need to correct your image paths so switch // for http://

SCSS is one of the syntaxes of SASS, which is a CSS preprocessor that improves the possibilities on your style code, with features like 'nesting' and 'variables'.

working version: link

Answer 2

Your server doesn't have compass installed, if you remove compass and update the images src to use http:// instead of // you will see that it semi-works.

To fix, install compass on your server http://compass-style.org/

Answer 3

The reason why your JSFiddle example does not work is because a new Fiddle defaults to CSS. Since the provided stylesheet is written using a CSS preprocessor language, you need to set the CSS panel to interpret SCSS.

Click on the gear at the top-right of the panel and select "SCSS" as the language then paste the SCSS code from the Code Pen.

Almost There...

To get this to work now, you will need to do one of the following:

• Remove the @import "compass"; line and include the missing mixins. (See demo).

  or

• Fix the import and add the correct path to a CDN or local file.

---

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