Responsive Animated CodePen Logo (Pure CSS)

Responsive Animated CodePen Logo (Pure CSS)

Responsive Animated CodePen Logo (Pure CSS)

A very warm welcome to code with random’s new blog. Today in this blog we are going to create a Responsive Animated Codepen Logo by using HTML and CSS. In this, the ‘O’ letter of codepen is animated like a cubed. It has a black background.
Before Moving forward to the code section. Let’s check the live server of the Codepen animated logo.

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.

In this code h1 class is logo and span class is cuboid.In span class of cuboid is front,back,top,bottom,left and right.
<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>
HTML OUTPUT:-
In this, we can see that the codepen of ‘O’ is missing…

 

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.

translateX(x) Defines a translation, using only the value for the X-axis
translateY(y) Defines a translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis

 

You Might Like This:

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:-

Responsive Animated CodePen Logo (Pure CSS)

You can see the CSS output of the code:-

Finally…Your logo of codepen is done……
In the last output(CSS output) you can see that the ‘O’ is in the shape of a cuboid and it is animated and it looks responsive……
I hope you may like it. If you like it or have any doubts comment in the comment box..
THANK YOU……
WRITTEN BY_SAYALI KHARAT
& HIMANSHU SINGH
Share on:

Leave a Comment