5/5 - (1 vote)

Let’s create a spinning 3D circle animation with us in this world of web design, animations and visual effects can make a significant impact on user experience. Today, we’re going to explore how to create a dynamic 3D spinning circle using just HTML and CSS. This effect combines basic styling with a bit of CSS animation to produce a visually engaging element. Let’s dive into the code and break down how it all works.

Table of Contents

The HTML Structure for spinning 3D circle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* CSS styles here */
</style>
<body>
    <div class="circle">
        <div></div>
    </div>
</body>
</html>

In this HTML structure, we have a div element with the class circle. Inside it, there’s another div element. This simple layout is all we need for our animation.

The CSS Styles

Now, let’s look at the CSS:

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: teal url(https://picsum.photos/id/13/1280/1280) no-repeat fixed 50% 50%;
  background-size: cover;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 500px;
}
/* above rules just window dressing for demo and not really needed */

.circle {
  width: 30vw;
  height: 20vw;
  border-radius: 50%;
  margin: 20px;
  background: red;
  animation: round 10s linear infinite;
  transform-style: preserve-3d;
  background: url(https://picsum.photos/id/220/300/200) no-repeat 50%;
  background-size: cover;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.circle div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url(https://picsum.photos/id/230/300/200) no-repeat 50%;
  background-size: cover;
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes round {
  to {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  }
}

Breaking Down the CSS

Basic Resets and Background:

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: teal url(https://picsum.photos/id/13/1280/1280) no-repeat fixed 50% 50%;
  background-size: cover;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 500px;
}

Here, we remove default margins and paddings and set the body’s background with a fixed image. The display: flex property centers our .circle element both horizontally and vertically. The perspective property gives a sense of depth to the 3D effect.

Styling the Circle:

.circle {
  width: 30vw;
  height: 20vw;
  border-radius: 50%;
  margin: 20px;
  background: red;
  animation: round 10s linear infinite;
  transform-style: preserve-3d;
  background: url(https://picsum.photos/id/220/300/200) no-repeat 50%;
  background-size: cover;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

This section styles our circle element. The border-radius: 50% makes it circular. It also includes a background image and a box shadow for a bit of depth. The animation property applies the spinning animation, which will rotate the circle around its Y-axis.

Adding a 3D Effect to Inner Div:

.circle div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url(https://picsum.photos/id/230/300/200) no-repeat 50%;
  background-size: cover;
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

The inner div is also styled to be a circle and has its own background image. The transform property rotates the inner circle on the Y-axis to create a 3D effect. The backface-visibility property ensures that the back side of the inner circle is not visible during rotation.

Keyframe Animation:

@keyframes round {
  to {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  }
}

The @keyframes rule defines the spinning animation. It rotates the circle around the Y-axis from 0 to 360 degrees, creating a continuous spinning effect.

Conclusion

This example demonstrates how to create a visually striking spinning 3D circle using CSS animations and transformations. By combining background images, 3D transforms, and keyframe animations, you can add a dynamic touch to your web design. Experiment with different properties and animations to create unique effects tailored to your project’s needs.

Feel free to modify the dimensions, colors, and images to match your design vision. Happy coding!

I hope this blog post helps you understand how to create a 3D spinning circle using HTML and CSS! If you have any more questions or need further explanations, feel free to ask.

Also keep learning with us.

0 0 votes

Course Rating