Creating A Rotating Logo Component In A Simple Way

Rotating image Vuejs component

Everyone likes animations, countless minutes spent on just hovering an image watching it rolling around. It would be nice to have animations everywhere but these things often come with a cost. If you are looking for a simple animation that could make your logo cooler, you can create your own despite the countless libraries which can be a burden in the end.

Crafting a rotating animation component

If you haven't a project going you can create one through the Vue CLI. Start with the following command:

vue create css-logo

Pick your preferred setup and start with:

yarn serve

Now go ahead and create a new component, preferably with a name like RotatingImages.vue. Add the image element and apply a relevant class to it. Then by using CSS properties, we can rotate the image to the right to make a full circle 360 degrees on hover.

<template>
  <div class="rotateLogo">
    <img class="rotating" src=".." alt="..">
  </div>
</template>

<script>
export default {
  name: 'RotatingLogo',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.rotating {
  transition: transform 1s ease-in-out;
}
.rotating:hover {
  transform: rotateZ(360deg);
}
</style>

With the above setup, you can rotate more elements just by applying the class rotating. This way you can add a second image which rotates separately on hover.

And then you can just import your own component anywhere you like:

app.vue

<template>
  <div id="app">
    <RotatingLogo></RotatingLogo>
  </div>
</template>

<script>
import RotatingLogo from './components/RotatingLogo.vue'

export default {
  name: 'app',
  components: {
    RotatingLogo
  }
}
</script>

If you would like to keep the logo-image rotating infinitely you can replace the CSS code above with this one:

@keyframes rotating
    {
    from
        {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
    }
@-webkit-keyframes rotating
    {
    from
        {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
    }
.rotating
    {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
    }