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 27 comments ( View all | Add 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
☆ TOM !! ☆	1697374529 using lmao Report Comment
[EXPUNGED] MRDOOMCONVEYOR, [DEIMOS/TIM/GABRIEL]	1695194091 using Report Comment
boykisser:3	1690927878 using !! Report Comment
Dean	1688985915 Using Report Comment
Homky	1688585995 using :o) Report Comment
grave	1688396595 Usin Report Comment
★Caroli★	1687972080 using Report Comment