Translate X and Y percentage values based on elements height and width?

by

When using percentage in a transform translate on a non-SVG element, it refers to the width or height of itself. Take a look at https://davidwalsh.name/css-vertical-center (demo):

One interesting thing about CSS transforms is that, when applying them with percentage values, they base that value on the dimensions of the element which they are being implemented on, as opposed to properties like top, right, bottom, left, margin, and padding, which only use the parent’s dimensions (or in case of absolute positioning, which uses its closest relative parent).

On an SVG element, a transform percentage refers to the size of the parent instead!

Here is a pen:

https://codepen.io/trusktr/pen/gOdwWXv

svg, [outer] {
  border: 1px solid black;
}

rect {
  transform: translate3d(50%, 50%, 0);
}

[inner] {
  background: black;
  transform: translate3d(50%, 50%, 0);
}
<svg width="100" height="80">
    <rect width="20" height="20" />
</svg>

<div outer style="width: 100px; height: 80px;">
    <div inner style="width: 20px; height: 20px;"></div>
</div>

Strange, huh?

More Related Contents:

  1. Why percentage value within grid-gap create overflow in CSS grid?
  2. WebKit: Blurry text with css scale + translate3d
  3. Height 100% on flexbox column child [duplicate]
  4. difference between div and span in simple language [duplicate]
  5. Adding a styled CSS button
  6. How can I make Bootstrap columns all the same height?
  7. How to identify unused CSS definitions from multiple CSS files in a project
  8. How does the CSS Block Formatting Context work?
  9. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  10. Any recommendations for a CSS minifier? [closed]
  11. :first-child not working as expected
  12. Is the viewport meta tag really necessary?
  13. How to create color shades using CSS variables similar to darken() of Sass?
  14. How to change flexbox wrap?
  15. Styling Google Maps InfoWindow
  16. Ordering of vendor-specific CSS declarations
  17. Using CSS transitions in CSS Grid Layout
  18. How to import fonts in CSS?
  19. How can I horizontally align my divs?
  20. Have a variable in images path in Sass?
  21. CSS: Using raw svg in the URL parameter of a background-image in IE
  22. How to use Apple’s new San Francisco font on a webpage
  23. css rotate a pseudo :after or :before content:”” [duplicate]
  24. How to detect if the OS is in dark mode in browsers?
  25. HTML / CSS Popup div on text click [closed]
  26. input height differences in Firefox and Chrome
  27. Why are spaces used to separate things in css
  28. What is the difference between pseudo-classes and pseudo-elements?
  29. How to fade the edge of a div with just CSS? [duplicate]
  30. How to properly introduce a light/dark mode in Bootstrap?

Leave a Comment