Responsive Animated CodePen Logo (Pure CSS)

Responsive Animated CodePen Logo (Pure CSS)

Live Server:-

See the Pen Responsive Animated CodePen Logo (Pure CSS) by George W. Park (@GeorgePark) on CodePen.

HTML CODE:-

As We know there are six faces in a cuboid so we make six div tag for six faces.

As span is an inline container, we used span for writing codepen where instead of o we inserted a cuboid class named span tag and then added styling to it.

<h1 class="logo">
    <span>c</span>
    <span class="cuboid">
        <span class="cuboid-face cuboid-face-front"></span>
        <span class="cuboid-face cuboid-face-back"></span>
        <span class="cuboid-face cuboid-face-top"></span>
        <span class="cuboid-face cuboid-face-bottom"></span>
        <span class="cuboid-face cuboid-face-left"></span>
        <span class="cuboid-face cuboid-face-right"></span>
    </span>
    <span>depen</span>
</h1>

CSS CODE:-

As Our layout is completed now we need to style the layout and change the divs used for 6 faces to convert in rectangular faces for that we give the same height and width to the opposite faces and style the div using CSS selectors. Hope you know about CSS selectors. We use “.” for the class-CSS selector.

In this tutorial, we are using some basic concepts of CSS for styling like border-box, animations,preserve-3d, calc and transform properties.

The transform-style the property specifies how nested elements are rendered in 3D space.

preserve 3d-Specifies that child elements will preserve its 3D position.

The transform the property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

The calc() function performs a calculation to be used as the property value.

You Might Like This:

• Advance Multi Step Form
• Responsive Flat Pricing Card
• Password Generator
• QR Code generator using JavaScript

In this, we want to design the logo of the ‘O’ letter which we want to make a cuboid with the help of css.

/* Base Styles */
* {
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #050505;
    overflow: hidden;
}
.logo {
    font-family: "Lato", Arial, sans-serif;
    font-size: calc(1em + 12vw);
    letter-spacing: 0.08em;
    color: #eee;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
} /* Cuboid Positioning */
.cuboid,
.cuboid-face {
    display: inline-block;
}
.cuboid {
    font-size: 0.75em;
    position: relative;
    height: 0.5em;
    width: 1em;
    vertical-align: middle;
    transform-style: preserve-3d;
    transform: rotateX(-40deg) rotateY(-45deg);
    animation: rotateCuboid 3s ease-in-out infinite;
}
.cuboid-face {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0.08em solid #eee;
}
.cuboid-face-top,
.cuboid-face-bottom {
    height: 1em;
}
.cuboid-face-front {
    transform: translateZ(0.5em);
    animation: faceFront 3s ease-in-out infinite;
}
.cuboid-face-back {
    transform: rotateY(180deg) translateZ(0.5em);
    animation: faceBack 3s ease-in-out infinite;
}
.cuboid-face-left {
    transform: rotateY(-90deg) translateZ(0.5em);
    animation: faceLeft 3s ease-in-out infinite;
}
.cuboid-face-right {
    transform: rotateY(90deg) translateZ(0.5em);
    animation: faceRight 3s ease-in-out infinite;
}
.cuboid-face-top {
    transform: rotateX(90deg) translateZ(0.5em);
}
.cuboid-face-bottom {
    transform: rotateX(-90deg);
} /* Animations */
@keyframes faceFront {
    50% {
        transform: translateZ(0.7em);
    }
}
@keyframes faceBack {
    50% {
        transform: rotateY(180deg) translateZ(0.7em);
    }
}
@keyframes faceLeft {
    50% {
        transform: rotateY(-90deg) translateZ(0.7em);
    }
}
@keyframes faceRight {
    50% {
        transform: rotateY(90deg) translateZ(0.7em);
    }
}
@keyframes rotateCuboid {
    100% {
        transform: rotateX(-40deg) rotateY(-405deg);
    }
}

CSS OUTPUT:-

You can see the CSS output of the code:-