Stack Overflow
Stack Overflow

Questions tagged [translate3d]

a CSS function to move the element in 3D space used with the transform CSS property

Description

The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.

Syntax

translate3d(tx, ty, tz)

where,

tx - is a representing the abscissa of the translating vector.

ty - is a representing the ordinate of the translating vector.

tz - is a representing the z component of the translating vector. It can't be a value; in that case the property containing the transform is considered invalid.

Example

  1. Translate3D Demo - W3.ORG
145 questions
102
votes
10 answers

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

Translating an elements Y axis 50% will move it down 50% of its own height, not 50% of the parents height as I would expect. How do I tell a translating element to base it's translation percentage on the parent element? Or am I not understanding…
Andrew Tibbetts
  • 2,874
  • 3
  • 23
  • 28
61
votes
8 answers

WebKit: Blurry text with css scale + translate3d

I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied. Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.) .test { -webkit-transform: translate3d(0px,…
phil
  • 897
  • 1
  • 8
  • 9
21
votes
2 answers

Can css3 translateZ() be used instead of z-index?

For example having 2 div's positioned absolute, one can put first div upon second by setting first div's z-index higher than second one's. Can we achieve such behaviour using translateZ() or translate3d?
mumu2
  • 661
  • 1
  • 5
  • 15
10
votes
4 answers

transform3d(): Using Percentage to Move Within Parent Object

CSS has standard behavior, when moving an object in percentage, that this percentage represents dimensions of its parent container (div). This is not true when using CSS3 transform: translate3d(). If using percentage values for either X, Y, or Z…
Bunkai.Satori
  • 4,698
  • 13
  • 49
  • 77
9
votes
1 answer

translate3d vs css left/top and hardware acceleration

As I understand hardware acceleration on iOS devices is enabled when using translate3d(). So why this test on jsperf shows that using css left/top is faster?
Marvin3
  • 5,741
  • 8
  • 37
  • 45
9
votes
3 answers

CSS 3 Animations. translate3d versus matrix

I have been doing projects that have required smooth transitions and animations. We have recently migrated from using Javascript to CSS animations almost 100% of the time. I have found using translate3d provides a very smooth nice animation on both…
w3bMak3r
  • 882
  • 8
  • 13
8
votes
2 answers

translate3d() causing jQuery hover/click events to not fire correctly

When analyzing jQuery mouse events on different CSS Animation types, I'm noticing that translate3d causes hover and other events to not fire correctly. In a basic example, I am animating a list of blocks from right to left. On rollover, I am setting…
jkusachi
  • 726
  • 7
  • 9
7
votes
1 answer

iPad 2 Safari shows pixellated html text and images

We are developing an HTML5 + CSS3 application for iPad and iPhone. The app is working fine on iPad & all iPhones, however, iPad 2 shows html dom objects pixellated on startup, and stays like that, sometimes always, sometimes for a few moments. App…
emrahgunduz
  • 1,404
  • 1
  • 13
  • 26
7
votes
2 answers

webkit translate3d issues (peek-thru)

I'm building an iOS app with PhoneGap. I'm using translate3d CSS animations to create the 'flip' effect. This works great on simpler elements...a DIV with front/back divs and maybe an extra span or two. But when I attempt to flip a larger…
DA.
  • 39,848
  • 49
  • 150
  • 213
7
votes
4 answers

Opacity change during a transition flickers in Safari

I have a composited div (it has translate3d) with an opacity transition: #bad { background-color: red; -webkit-transition: opacity .5s linear; -webkit-transform: translate3d(0, 0, 0); } If I change its opacity while transition is…
Dan Abramov
  • 264,556
  • 84
  • 409
  • 511
7
votes
3 answers

3D CSS transform: translateZ causes elements to disappear in Chrome

I am using Javascript to manipulate CSS transforms in Chrome, and I've noticed that when translateZ values get too low (far away), elements will disappear. This only seems to happen if there are a large number of elements. It seems like this might…
twiz
  • 9,041
  • 8
  • 52
  • 84
6
votes
0 answers

Why is it not possible to use transform: translateZ on svg path element?

I'd like to animate parts of an inline svg element. I think it is really cool that you can use css transforms on the svg path elements, and thereby animate parts of the svg. But after playing around with it, I have run into an issue with the…
Malibur
  • 1,695
  • 5
  • 22
  • 31
6
votes
2 answers

Can't make translate3d Z property to work

I am traying to use: -webkit-transform: translate3d(0,500px,300px); X and Y properties working just fine, but Z (300px),just won't work. Here is the jfiddle. What am I doing wrong? I tried both Chrome 24 and Canary 25 Thanks for your support...
hjuster
  • 3,985
  • 9
  • 34
  • 51
5
votes
2 answers

HTML5 Canvas Javascript - How to make a moveable canvas with tiles using 'translate3d'?

I'm having trouble with a movable canvas that adjusts as the 'player' moves around the map. As drawing 600 tiles, 60 times a second is very inefficient, I switched over to using translate3d and only draw once the player crossed a full tile -- but it…
Vardan Betikyan
  • 354
  • 5
  • 20
5
votes
3 answers

Get divs position after translate3d

In Javascript, when I move an element using the gpu via the translate3d method, the elements style-left position doesnt change at all. As the cpu isnt even aware any motion has occurred. How do I track what the new position of an element is, after…
john-jones
  • 7,490
  • 18
  • 53
  • 86
1
2 3
…
9 10