# Question regarding CSS3 animations.

**URL:** <https://forum.kirupa.com/t/question-regarding-css3-animations/638580>\
**Category:** Uncategorized\
**Created:** [August 5, 2018, 3:00pm UTC](https://forum.kirupa.com/t/question-regarding-css3-animations/638580 "2018-08-05T15:00:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [August 5, 2018, 3:00pm UTC](https://forum.kirupa.com/t/question-regarding-css3-animations/638580/1 "2018-08-05T15:00:54Z")

</div>

In reading about CSS3 Animations, I’ve seen references like this: transform: translate3d(-100%, 0, 0); and I would like to know what is the reference point? In other words, move in the x-direction by -100% of what?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [August 5, 2018, 4:57pm UTC](https://forum.kirupa.com/t/question-regarding-css3-animations/638580/2 "2018-08-05T16:57:04Z")

</div>

Percentages in transforms are based on the object being transformed rather than, like with other css, the container. So giving a div margin of -100% will shift it left 100% of the width of the container area while your transform (transforming x) would shift it 100% of the width of the div itself.

---

<div class="post-metadata">

**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\
**Post date:** [August 5, 2018, 5:50pm UTC](https://forum.kirupa.com/t/question-regarding-css3-animations/638580/3 "2018-08-05T17:50:44Z")

</div>

Thanks for that explanation. Things now make a lot more sense to me.