add spinning effect to image

user_14405203 0
Viewed 159

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>

css html javascript
3 Answers

Is this anything like what you're after?

Just animating transform: translateX on the <a> tag:

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

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

@keyframes horizontal {
  0%,
  100% {
    transform: translateX(-20px);
  }
  50% {
    transform: translateX(20px);
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a {
  animation: horizontal 10s cubic-bezier(.81,.14,.57,.73) infinite;
}

.avatar {
  position: relative;
  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);
  transform: translate(0px, 0px);
  animation: float 3s ease-in-out infinite;
}

.avatar img {
  width: 70%;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

Or maybe a bit faster?

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

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

@keyframes horizontal {
  0%,
  100% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateZ(0)
}

a {
  animation: horizontal 3s cubic-bezier(.3, .5, .7, 1.73) infinite;
}

.avatar {
  position: relative;
  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);
  transform: translate(0px, 0px);
  animation: float 3s ease-in-out infinite;
}

.avatar img {
  width: 70%;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

With 3d turning:

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

@keyframes float {
  0%,
  100% {
    box-shadow: 6px 7px 10px -2px rgba(0, 0, 0, 0.6);
    transform: translateY(0) skew(-2deg) rotateY(15deg);
    background-color: rgb(255, 198, 41);
    filter: brightness(0.9);
  }
  50% {
    box-shadow: -10px 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px) skew(2deg) rotateY(-20deg);
    background-color: rgb(245, 190, 41);
    filter: brightness(1.1);
  }
}

@keyframes horizontal {
  0%,
  100% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // Hardware acceleration
  transform: translateZ(0);
}

a {
  animation: horizontal 3s cubic-bezier(.3, .5, .7, 1.73) infinite;
}

.avatar {
  position: relative;
  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);
  transform-origin: top;
  animation: float 3s ease-in-out infinite;
}

.avatar img {
  width: 70%;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

user_127019490

Here's quick way to do it.

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);
  
}

.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
<!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" class="rotate" width="100" height="100" />
        </div>
    </a>

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

user_68481120

To make 3d image, you can make a gif-image

The easiest for coding is to make a insert gif-image instead of the logo/icon. The gif-file is an animated images itself and no need to code anything.

It might be a bit of work for whoever has to make the gif(animated images), but it's easy if you know how. There are plenty of resources on how to make a gif and also tools to make a gif online as well.

HTML example (simply added the src-path to gif-image online):

<!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>
<body>
    <h1>Click image and say hi to google</h1>
    <div class="container">
        <a href="https://google.com">
            <div class="avatar">
                <!--<img src="<replace image.gif location/path here to test>" alt="test.gif"/>-->
                <img src="https://media4.giphy.com/media/OhkMiKX0uMmLC/giphy.webp?cid=ecf05e47ben5f39yax86yjdknevq6lklvbb7x4gcnz9zdo89&rid=giphy.webp" alt="image.gif (Graphics Interchange Format)"/>

            </div>
        </a>
    </div>
</body>
</html>

user_143891900
Related