css - 翻译成特定点的css

Question

无论如何，我来这里是想问一下是否有办法将 div 转换为特定点。我最初尝试了 translate()，只是意识到它通过将值添加到它的偏移量来翻译 div:

HTML:

<div class="ttd">I move!</div>

CSS:

.ttd {
    -webkit-transition: transform 2s;
    transform: translate(20px, 20px);
}

我试图将一个 div 转换为从窗口的顶部和左侧偏移 20px 的点。谁能帮我解决这个问题？此外，这在 css 中可能吗？

Answer 1

这会将 div 转换为距窗口顶部和左侧 20px 的偏移量:

.ttd {
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-animation: myAnim 0.5s forwards;
    /*-webkit-animation-delay: 2s;*/
    animation: myAnim 0.5s forwards;
    /*animation-delay: 2s;*/
}

@-webkit-keyframes myAnim {
    100% { left: 20px; top: 20px; }
}

@keyframes myAnim {
    100% { left: 20px; top: 20px; }
}

<div class="ttd">I move!</div>

您可能不想查看这些关于 CSS 过渡和动画的有趣链接:

• > http://www.w3schools.com/css/css3_transitions.asp
• > http://css3.bradshawenterprises.com/transitions/