Telegram Group Join Now
ADVERTISEMENT
Responsive Animated CodePen Logo (Pure CSS)
Responsive Animated CodePen Logo (Pure CSS)
ADVERTISEMENT
Live Server:-
ADVERTISEMENT
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.
ADVERTISEMENT
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.
ADVERTISEMENT
<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>
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.
ADVERTISEMENT
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.
ADVERTISEMENT
The calc() function performs a calculation to be used as the property value.
ADVERTISEMENT
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:
- 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:-
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT