a floating purple cube, for no apparent reason

Tags: animation, sup qurl

Description:

qurl mecca

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by veronica (https://layouts.spacehey.com/layout?id=22404) -->

<div id="separator">
    <div id="cube">
        <div id="front"><p>sup qurl</p></div>
        <div id="back"><p>sup qurl</p></div>
        <div id="left"><p>sup qurl</p></div>
        <div id="right"><p>sup qurl</p></div>
        <div id="top"><p>sup qurl</p></div>
        <div id="bottom"><p>sup qurl</p></div>
                <div class="shadow"></div>

    </div>
</div>  

<style>
body {
  font-family: arial;
}
</style>

<style>#separator {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    perspective: 800px;
}

#cube {
    width: 200px;   
    transform-style: preserve-3d; 
    animation: rotate 15s linear infinite;
}

#cube div:not(:last-child) {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    border: 2px solid black;
}

#cube div p {
     margin: 0;
    color: white;
    font-size: 80px;
    text-align: center;
    vertical-align: baseline;
}


#front {
    transform: translateZ(100px);
    background: rebeccapurple;
    background-position: center;
    background-repeat: no-repeat;

}


#back {
    transform: rotateY(180deg) translateZ(100px);
    background: rebeccapurple;
    background-position: center;
    background-repeat: no-repeat;    
}

#left {
    transform: rotateY(-90deg) translateX(-100px);
    transform-origin: left;
    background: rebeccapurple;
    background-position: center;
    background-repeat: no-repeat;    
}

#right {
    transform: rotateY(90deg) translateX(100px);
    transform-origin: right;
    background: rebeccapurple;
    background-position: center;
    background-repeat: no-repeat;    
}

#top {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top;
    background: rebeccapurple;
    background-position: center;
    background-repeat: no-repeat;    
}

#bottom {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom;
    background: rebeccapurple;
    background-position: center;
    background-repeat: no-repeat;    
}

@keyframes rotate {
    0% { 
        transform: rotateY(0); 
    }
    100% {
        transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); 
    }
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 35 comments ( View all | Add Comment )

iirysae_	1739531553 usinggg Report Comment
spawn	1738288098 using !! Report Comment
m0sdet6	1737736207 using Report Comment
lifeoftheparty	1735959640 using Report Comment
NoName :P	1735328516 using Report Comment
PIA ᥫ᭡ SOPHIE	1733590834 using Report Comment
PIA ᥫ᭡ SOPHIE	1733590833 using Report Comment
teeheetootas	1732229822 using but edited !! Report Comment
Oliverr/Duff 𖤐	1729141633 USINGSG Report Comment
enthusiast	1726193970 USINGG!! Report Comment
₊✩‧₊meowmorp₊✩‧₊	1724564205 using :3 Report Comment
stellarPantomime	1712336603 LUV THIS Report Comment
guy ♪	1712236642 using ^_^ Report Comment
nonamo	1711545784 using i think Report Comment
ALEXANDER^_^	1711081478 Gonna use as a template Report Comment
nerium	1709701767 using!! Report Comment
Snoesie	1707071766 Lol using Report Comment I tried to change the color to pink but now it has no color :0 by Snoesie; 1707072808; Report Nvm i fixed it :D yaay background-color: #ff6ec7; by Snoesie; 1707074985; Report
HEE HEE	1706731410 using Report Comment
HEE HEE	1706731407 using Report Comment
Jack	1698105511 using lol Report Comment