Css3 Translate in Percent

css3 translate in percent

The percentage there is not of the parent container in the way you might expect but of the element itself. The spec describes it as:

[The percentage] refer[s] to the size of the element's box

Regarding %s, the spec says:

Note that values are not allowed in the translateZ
translation-value, and if present will cause the propery value to be
invalid.

Though, it seems that instead, they aren't valid in any of them for Chrome at least.

Sorry :(

Is the CSS3 transform translate percentage values relative to its width and/or height?

In this section http://www.w3.org/TR/css3-transforms/#transform-property it states:

Percentages: refer to the size of bounding box

The definition of bounding box is (source)

A bounding box is the object bounding box for all SVG elements without an associated CSS layout box and the border box for all other elements. The bounding box of a table is the border box of its table wrapper box, not its table box.

And border box is (source)

The width and height properties include the padding and border, but not the margin. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} lead to a box rendered in the browser of width: 350px.

I hope this helps

CSS/LESS translate with calc percent & pixels

that write an example

transform: translateX(calc(~'(100% + 15px)')); /* calc doesnt work on transform*/

so use 
transform: translateX(100%) translateX(+15px);

Can I use percentage units with CSS3 matrix transform

Can we use percentage inside matrix function?

No, you can't use percentage values inside a matrix transform function. Below is an extract from the W3C Specs for Transform Functions. As you can see there, the parameters for the matrix function are specified as just <number> whereas for the translate functions it is <number-percentage>. This shows that the matrix can accept only numeric values whereas the translate can accept percentage.

matrix() = matrix( <number> [, <number> ]{5,5} )

specifies a 2D transformation in the form of a transformation matrix of the six values a-f.

translate() = translate( <length-percentage> [, <length-percentage> ]? )

specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.

translateX() = translateX( <length-percentage> )

specifies a translation by the given amount in the X direction.

translateY() = translateY( <length-percentage> )

specifies a translation by the given amount in the Y direction.

matrix3d() = matrix3d( <number> [, <number> ]{15,15} )

specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.

translate3d() = translate3d( <length-percentage> , <length-percentage> , <length> )

specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.

---

How does the spec define a number value?

And the below is how the W3C Spec defines the <number>:

Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.

When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the <number-token> production in the CSS Syntax Module [CSS3SYN]. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.

---

So what should I do now?

You should convert the percentage value into a normal real number and then use it inside the matrix function. It is generally the dimension of the box in the required axis (including borders and padding) * the required percentage. So, for a box with 100x100px dimension, 5px padding and a 1px border on all sides), 100% translate would be equal to 112 whereas -50% would be equal to -56.

You can refer to The Matrix Resolutions site to see it in action. Below is a demo with both approaches.

div {
  height: 100px;
  width: 100px;
  margin: 10px;
  padding: 5px;
  border: 1px solid rebeccapurple;
  background: rgba(102, 51, 153, 0.25);
}
.translate {
  transform: translate(100%, 100%);
}
.matrix {
  transform: matrix(1, 0, 0, 1, 112, 112);
}

<div class='matrix'>Hello! I'm using matrix.</div>
<div class='translate'>Hello! I'm using translate.</div>

Alternative ways to css transform with percentages to animate dom translation

You can simply add a CSS class, and toggle that as needed.

const toggle = document.getElementById('toggle');const seats = document.querySelectorAll('.seat');
toggle.addEventListener('click', e => {  seats.forEach(seat => {    seat.classList.toggle('not-dealt');  });});

.container {  position: relative;  width: 40vmax;  padding-bottom: 40vmax;  height: 0;  background: #cdc;}
.seats {  position: absolute;  width: 100%;  height: 100%;}
.seat {  position: absolute;  background: #d99;  transition: all 2s;  white-space: nowrap;}
.one {  top: 100%;  left: 50%;  transform: translate(-50%, -100%);}
.two {  top: 50%;  left: 0%;  transform: translate(0, -50%);}
.three {  top: 50%;  left: 100%;  transform: translate(-100%, -50%);}
.not-dealt {  top: 0;  left: 50%;  transform: translate(-50%, 50%);}
.cards {  position: absolute;  height: 100%;  width: 100%;}
.dealer {  position: absolute;  top: 0;  left: 50%;  transform: translate(-50%, 50%);}

<div class="container">  <div class="cards">    <div class="dealer">      Dealer    </div>  </div>
  <div class="seats">    <div class="seat one">      <div class="hand">        Hand 1      </div>    </div>    <div class="seat two">      <div class="hand">        Hand 2      </div>    </div>    <div class="seat three">      <div class="hand">        Hand 3      </div>    </div>  </div></div>
<button id="toggle">Toggle Cards</button>

---

Related Topics