Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div>
    <img src="data:image/png;base64,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" alt="">
    <img src="data:image/png;base64,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" alt="">
</div>
              
            
!

CSS

              
                body, html { height: 100%; }
body {
    display: flex;
    align-items: center;
    justify-content: center;
}
div {
    perspective: 800px;
}
img {
    transform-origin: 20% 80%;
    transform: var(--ani);
    @keyframes flap {
        0%{ transform: rotate3d(0, 0, 0, 0); }
        80%{ transform: rotate3d(0, 0, 0, 0); }
        85% { transform: var(--ani); }
        90%{ transform: rotate3d(0, 0, 0, 0); }
        95%{ transform: var(--ani); }
        100%{ transform: rotate3d(0, 0, 0, 0); }
    }
    animation: flap 6s infinite linear;
    &:first-child {
        filter: brightness(80%);
        --ani: rotate3d(-5.8, -1.2, 1.3, 54.2deg);
        position: absolute;
    }
    &:last-child{
        --ani: rotate3d(6, 5, 0, 55deg);
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console