3D element movement with CSS and script

July 9, 2023

I want to move an element in 3D from top to bottom.

For this purpose, I have used the animation mode in CSS. The animation that I have designed rotates the element 360 degrees and at the same time moves down.

The 360 degree rotation mode of the element works fine but it doesn’t move down and I don’t know where the problem is.

Can you show me a simple solution to move the element from top to bottom by editing the code?

Thanks in advance for any help.

const items = document.querySelectorAll(".SVG_main");
items.forEach(item => item.classList.add("animating"));

body{
    position: relative;
    direction: rtl;
}

.SVG_main svg{
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    
}

.animating.SVG_main svg{
    animation: MoveSvg 4.5s linear infinite;
}


@-webkit-keyframes MoveSvg {
    0% {
        top: 0;
        left: 0;
        transform: rotateY(0deg);
    }

    50% {
        top: 50%;
        left: 50%;
        transform: rotateY(180deg);
    }

    100% {
        top: 100%;
        left: 0;
        transform: rotateY(360deg);
    }
}

@keyframes MoveSvg {
    0% {
        top: 0;
        left: 0;
        transform: rotateY(0deg);
    }

    50% {
        top: 50%;
        left: 50%;
        transform: rotateY(180deg);
    }

    100% {
        top: 100%;
        left: 0;
        transform: rotateY(360deg);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="SVG_main">
        <svg fill="#000000" width="80px" height="80px" viewBox="0 0 32 32" version="1.1"
            xmlns="http://www.w3.org/2000/svg">
            <title>leaf</title>
            <path
                d="M28.082 9.534c-0.058 0.174-0.117 0.349-0.176 0.525 0.674 3.296 0.425 6.877-1.276 10.787 0.247-2.511 0.206-4.913-0.182-7.215-0.458 0.891-1.042 1.755-1.64 2.624 0.085 2.497-0.381 5.132-1.603 7.944 0.196-1.997 0.16-3.922-0.036-5.794-0.801 0.911-1.695 1.786-2.697 2.587-0.237 1.584-0.684 3.223-1.421 4.92 0.132-1.348 0.154-2.68 0.109-3.972-2.221 1.51-4.858 2.718-8.053 3.389 2.691-1.51 4.838-3.068 6.596-4.665-1.156-0.241-2.346-0.399-3.535-0.51 1.572-0.397 3.124-0.552 4.628-0.51 1.075-1.099 1.973-2.205 2.697-3.353-2.005-0.361-4.034-0.465-6.086-0.328 2.355-1.14 4.702-1.538 7.033-1.385 0.602-1.24 1.014-2.523 1.312-3.826-1.773-0.168-3.704 0.253-5.904 0.802 1.986-1.82 4.133-2.61 6.268-2.842 0.111-0.903 0.169-1.808 0.18-2.741-9.848-7.007-7.239 16.56-22.665 20.346 12.693 7.863 37.271-3.539 26.451-16.782zM25.788 1.846c0.628-0.305 1.39-0.323 1.968 0.219 0.33 3.103-0.68 9.663-4.665 14.249 3.039-5.538 3.261-9.548 2.697-14.467v-0z">
            </path>
        </svg>
    </div>

>Solution :

Edit: To move to the bottom of the page, you can use a value of 100vh and subtract the svg’s height from it.

You can simply animate using the translateY property:

const items = document.querySelectorAll(".SVG_main");
items.forEach(item => item.classList.add("animating"));

body {
  position: relative;
  direction: rtl;
}

.SVG_main svg {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.animating.SVG_main svg {
  animation: MoveSvg 4.5s linear infinite;
}

@keyframes MoveSvg {
  0% {
    transform: translateY(0) rotateY(0deg);
  }
  100% {
    /* This moves the svg to the bottom of the page */
    transform: translateY(calc(100vh - 80px)) rotateY(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="SVG_main">
  <svg fill="#000000" width="80px" height="80px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <title>leaf</title>
            <path
                d="M28.082 9.534c-0.058 0.174-0.117 0.349-0.176 0.525 0.674 3.296 0.425 6.877-1.276 10.787 0.247-2.511 0.206-4.913-0.182-7.215-0.458 0.891-1.042 1.755-1.64 2.624 0.085 2.497-0.381 5.132-1.603 7.944 0.196-1.997 0.16-3.922-0.036-5.794-0.801 0.911-1.695 1.786-2.697 2.587-0.237 1.584-0.684 3.223-1.421 4.92 0.132-1.348 0.154-2.68 0.109-3.972-2.221 1.51-4.858 2.718-8.053 3.389 2.691-1.51 4.838-3.068 6.596-4.665-1.156-0.241-2.346-0.399-3.535-0.51 1.572-0.397 3.124-0.552 4.628-0.51 1.075-1.099 1.973-2.205 2.697-3.353-2.005-0.361-4.034-0.465-6.086-0.328 2.355-1.14 4.702-1.538 7.033-1.385 0.602-1.24 1.014-2.523 1.312-3.826-1.773-0.168-3.704 0.253-5.904 0.802 1.986-1.82 4.133-2.61 6.268-2.842 0.111-0.903 0.169-1.808 0.18-2.741-9.848-7.007-7.239 16.56-22.665 20.346 12.693 7.863 37.271-3.539 26.451-16.782zM25.788 1.846c0.628-0.305 1.39-0.323 1.968 0.219 0.33 3.103-0.68 9.663-4.665 14.249 3.039-5.538 3.261-9.548 2.697-14.467v-0z">
            </path>
        </svg>
</div>