Question

我有相同的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/

codepen：http://codepen.io/stephenjbell/pen/BWvgXw

Answer 1

这是因为css中的jsfiddle设置设置为css，需要scss。

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

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

jsfiddle和codepen上相同的html / css代码之间无法解释的差异

1 个答案: