jquery 使用CSS和脚本移动3D元素

2ul0zpep  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(98)

我想在3D中从上到下移动一个元素。
为此,我使用了CSS中的动画模式。我设计的动画将元素旋转360度,同时向下移动。
元素的360度旋转模式工作正常,但它不向下移动,我不知道问题出在哪里。
你能告诉我一个简单的解决方案,通过编辑代码从上到下移动元素吗?
提前感谢任何帮助。

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

tv6aics11#

**编辑:**要移动到页面底部,可以使用100vh值并从中减去svg的高度。

您可以使用translateY属性简单地设置动画:

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>

相关问题