cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

โš ๏ธ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              mixin top()
  tr.table__top
    th
    th (ใƒŽเฒ ็›Šเฒ )ใƒŽๅฝกโ”ปโ”โ”ป
    th
    th
    th
    th
mixin leg()
  tr.table__leg
    td
    td
    td
    td
    td
input(type='checkbox')
table.table
  tbody
    +top()
  - for (let i = 0; i < 4; i++)
    +leg()
            
          
!
            
              *
*:before
*:after
  box-sizing border-box

$imageId = 'https://source.unsplash.com/8mDJ31rIg08/300x300'

body
  background-color #86e2d5
  min-height 100vh
  overflow hidden

input
  cursor pointer
  opacity 0
  height 50vh
  width 50vw
  position fixed
  transform translate3d(-50%, -50%, 0)
  top 50%
  left 50%
  z-index 10

  &:checked ~ table
    transition transform .25s cubic-bezier(.76,.18,.95,.03)
    transform translate(-50%, -50%) rotateX(-30deg) rotateY(40deg) translate3d(0, 0, -100px) rotateX(90deg)

td
th
  background-color #4c2e10
  background-image url('https://source.unsplash.com/8mDJ31rIg08/300x300')
  background-size cover

// Add a little darkness to some sides
td:nth-of-type(1)
  filter brightness(0.85)
th:nth-of-type(2)
  filter brightness(0.65)

$height = 200px
$width = 300px
.table
  position absolute
  transform-style preserve-3d
  transform-origin bottom
  transition transform .25s ease
  transform translate(-50%, -50%) rotateX(-30deg) rotateY(40deg) translate3d(0, 0, -100px)
  top 50%
  left 50%
  height $height
  width $width
  display block

  *
    transform-style preserve-3d
    position absolute
    display block

  tbody
    height 100%
    width 100%

  &__top
    height $height
    width $width
    top 75px
    transform rotateX(90deg) translate3d(0, 0, 0)
    transform-origin top center

    th:nth-of-type(1)
    th:nth-of-type(2)
      height 100%
      width 100%

    th:nth-of-type(2)
      align-items center
      color #ffc99b
      display flex
      font-size 1.5rem
      justify-content center
      text-shadow 2px 2px black
      transform translate3d(0, 0, -25px) rotateX(180deg)

    th:nth-of-type(3)
    th:nth-of-type(5)
      height 25px
      width 100%

    th:nth-of-type(4)
    th:nth-of-type(6)
      height 100%
      width 25px

    th:nth-of-type(3)
      transform-origin top
      transform rotateX(-90deg)

    th:nth-of-type(4)
      transform-origin right
      transform rotateY(-90deg)
      right 0

    th:nth-of-type(5)
      transform-origin bottom
      bottom 0
      transform rotateX(90deg)

    th:nth-of-type(6)
      transform-origin left
      left 0
      transform rotateY(90deg)


  &__leg
    height ($height / 2)
    width 25px
    bottom 0px

    &:nth-of-type(1)
    &:nth-of-type(3)
      transform translate3d(0, 0, $height)

    &:nth-of-type(2)
    &:nth-of-type(4)
      transform translate3d(0, 0, 25px)

    &:nth-of-type(3)
    &:nth-of-type(4)
      left 275px

    td
      height 100%
      width 100%

    td:nth-of-type(2)
      transform translate3d(0, 0, -25px)

    td:nth-of-type(3)
      transform-origin left
      transform rotateY(90deg)

    td:nth-of-type(4)
      transform-origin right
      transform rotateY(-90deg)

    td:nth-of-type(5)
      height 25px
      width 25px
      bottom 0
      transform-origin bottom
      transform rotateX(90deg)
            
          
!
            
              // NOT FOUND
// (ใƒŽเฒ ็›Šเฒ )ใƒŽๅฝกโ”ปโ”โ”ป
            
          
!
999px
๐Ÿ•‘ One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console