1

我有相同的 html / css 代码，但输出只适用于 codepen 而不是 jsfiddle。怎么会？

html

<div class="spring">
  <div class="text">These are words</div>
  <div class="sect sect1">
    <div class="text">written down</div>
    <div class="sect sect2">
      <div class="text">and</div>
      <div class="sect sect3">
        <div class="text">even further down.</div>
      </div>
    </div>
  </div>
</div>

css

@import url('https://fonts.googleapis.com/css?family=PT+Sans');

body {
  perspective: 100000px;
  transform-style: preserve-3d;
  font-size:2em;
  font-family:"PT Sans",sans-serif;
  text-align:center;
  color:#4a4a4a;
  background-color:#eee;
  box-sizing:border-box;
}

.spring {
  padding:1em 2em;
  margin-top:2em;
  background-color:#4a4a4a;
  color:#fff;
  border-radius:3px;
  display:inline-block;
  transform: rotateX(50deg) rotateY(-22.5deg);
  transform-style: preserve-3d;
  transition:0.4s all;

  &:hover {
    transform: rotateX(40deg) rotateY(-10.5deg);
  }

  .text {
    transform:scaleY(1.5);
  }

  .sect {
    position:absolute;
    display:block;
    border:4px solid #4a4a4a;
    top:0;
    transform-style: preserve-3d;
    border-radius:3px;
  }

  .sect1 {
    background-color:#fff;
    color:#4a4a4a;
    border:4px solid #4a4a4a;
    transform:rotateY(30deg);
    transform-origin:0 0;
    left:0;
    padding:1em 1em 1em 3em;
  }

  .sect2 {
    background-color:#4a4a4a;
    color:#fff;
    transform:rotateY(-30deg);
    transform-origin:100% 0;
    right:0;
    padding:1em 3em 1em 1em;
  }

  .sect3 {
    background-color:#fff;
    color:#4a4a4a;
    border:3px solid #4a4a4a;
    transform:rotateY(30deg);
    transform-origin:0 0;
    left:0;
    width:300px;
    padding:1em 1em 1em 3em;
  }
}

jsfiddle：https ://jsfiddle.net/snaL0cj8/5/

代码笔： http ://codepen.io/stephenjbell/pen/BWvgXw

4

1 回答 1

1

那是因为它需要设置为 csscss中的设置。jsfiddlescss

单击css部分中的设置选项，然后从下拉列表中Language选择SCSS在jsfiddle中，这样就可以了

看到这个小提琴：https ://jsfiddle.net/seofbrse/

于 2017-04-01T18:19:37.993 回答