Cloud Stack Ninja

I have this floating circle with a logo. Is there a way to make it sway left and right as a 3d image? I have added a minimalistic reproducible example showing what I have at the moment. If anything is unclear, feel free to ask questions.

I want it to go sway to the left, then to the right and make it 3d. I am not sure how to transform this into a 3d image or add the effect. Can anyone help me?

I know understand that you have to use an SVG if I want this effect to occur. Here is an example of the effect. Look at the icons on the landing page of this website matruecannabis.com/en

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ffc60b;
}

@-webkit-keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translatey(-20px);
            transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translatey(-20px);
            transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
.container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.avatar {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 5px white solid;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: float 3s ease-in-out infinite;
          animation: float 3s ease-in-out infinite;
}
.avatar img {
  width: 70%;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Floating Logo</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
    <a href="https://google.com">
        <div class="avatar">
            <img src="https://i.ibb.co/2Y8J8TC/logo.png" alt="Skytsunami"/>
        </div>
    </a>

</div>
<!-- partial -->
  
</body>
</html>



Read more here: https://stackoverflow.com/questions/64402888/add-spinning-effect-to-image

Content Attribution

This content was originally published by asohasf1241 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: