CODEWITHSUNDEEP
htmlcss
J.Doe
J.Doe

Reputation: 61

What does the percentage refer to when used as coordinate values?

I found some sample code to solve a previous problem I was looking at but do not fully understand the solution.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}


/* Standard syntax */
@keyframes example {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Here is some sample code that will pull the image from the left and show it over the duration of four seconds. However I do not understand the percentages used in this example, specifically transform: translate3d(-100%, 0, 0);

When percentages are used in this context, or however any. What is it referring to? -100% of what? I understand that sometimes height: 50%; will set the height to 50% of the current width, however this example seems different.

Upvotes: 0

Views: 95

Answers (4)

the_legitTDM
the_legitTDM

Reputation: 353

You can try translate3D() which is a CSS method to move the object in terms of the 3 planes, x, y, and z with the syntax translate3d(tx, ty, tz). You can look at this which goes into more detail.

Upvotes: 2

Morgan
Morgan

Reputation: 670

If you take a peek at the documentation for translate3d, the first variable is tx.

tx is a length or percentage representing the abscissa of the translating vector.

According to Wikipedia, the abscissa "is the distance between the projection and the origin of the axis".

So from this, we can surmise that the percentage here is relative to the width of the shape you are using translate on.

If you have a 100px wide shape, translate3d(100%, 0, 0) will move it to the right by 100px.

When percentages are used in this context, or however any. What is it referring to? -100% of what? I understand that sometimes height: 50%; will set the height to 50% of the current width, however this example seems different.

You are absolutely right! Percentages usually are relative to the parent. This specific case is different. According to the docs:

The percentage CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object.

Further Reading

Here's a great article on CSS you might be interested in.

Specifically, 2/3 of the way down the page, there's a heading title "Lengths" that you may find very helpful with clarifying your understanding on absolute units like px vs. relative units like percentages.

Upvotes: 1

Aadithya Varma
Aadithya Varma

Reputation: 21

translate3D(tx, ty, tz) is a CSS method to move the object in terms of the 3 cartesian planes, x, y, and z. When your transform property is set to -100%, the object is moved 100% relatively in the opposite direction in the x plane.

Upvotes: 1

zer0
zer0

Reputation: 5017

It is relative to the bounding box which is defined as

The object bounding box is the bounding box that contains only an element's geometric shape. For basic shapes, this is the area that is filled. Unless otherwise specified, this is what is meant by the unqualified term "bounding box".

Since the parameters of translate3d are the x,y and z coordinates, the -100% applied in your example to the x coordinate will move it left by 100% with respect to it's bounding box.

Upvotes: 1

Related Questions