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
5
votes
0 answers

Smooth scrolling using css translate 3D

We're building a smooth scrolling library using minimal js and css translate 3d properties. We have a foundation for this (as attached pen), however as we increase the number of images and text content, the animation starts to jitter and sometimes…
Clive Vella
  • 51
  • 1
  • 2
5
votes
1 answer

Translate3d doesn't move embedded element in Safari (Windows only)

I'm trying to move an embedded element with the CSS3's transform: translate3d() method. It works perfectly in every browser, except for Safari, which doesn't seem to move the video/audio itself but manages to move the embedded element. Here's the…
Vince C
  • 868
  • 6
  • 16
5
votes
1 answer

Make 3d-translated element clickable

I have two divs inside a wrapper-div. The first one is positioned in front of the wrapper via translate3d(50px, 50px, 50px), the second is positioned behind the wrapper via translate3d(50px, 50px, -50px). I want to bind click-events to the…
rttmax
  • 344
  • 1
  • 12
4
votes
0 answers

Applying a scaling transform on a currently transforming element

I'm using stellar.js and iscroll-probe.js (part of iScroll 5), to handle scrolling on a mobile device, in a HTML5 app built with Ionic (using Cordova). My issue is that I am telling stellarJs to scroll using transforms scrollProperty:…
Ben Taliadoros
  • 7,003
  • 15
  • 60
  • 97
4
votes
1 answer

-webkit-transform:translate blocky render on iPad

So I understand that translate/translate3d utilizes the GPU, but for some reason it is causing large graphics to render in blocks/chunks on the iPad. I'm having difficulty finding anywhere that states a maximum width/height for images when using…
daleyjem
  • 2,335
  • 1
  • 23
  • 34
3
votes
3 answers

Css jittery text translate

[SOLUTION] Solution is to use the will-change CSS property taht forces GPU rendering: will-change: transform; [ORIGINAL QUESTION] I've been digging a lot internet and found no solution to a problem that seems rather simple which is, translating a…
Durss
  • 306
  • 2
  • 11
3
votes
2 answers

Animating two circles to meet exactly in the middle

So I'm aiming to have two circles meet from either side of the screen and meet in the middle to perform the second half of the animation (scaling and opacity change). But by setting the initial keyframe and last using vw they don't meet in the…
Ruairi Madine
  • 31
  • 1
3
votes
0 answers

Smoothly animating a large image in CSS using translate3d

The following question is about using GPU accelerated rendering on large images to bust jank. I'm having trouble with making a large image, animated with translate3d, draw using the compositor thread. I've reduced the problem to this fiddle:…
Edward Croft
  • 31
  • 2
3
votes
1 answer

How do I constraint an animation using only CSS and HTML?

For a school project, I'm doing a Pong game following this tutorial: http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/ I'm stuck at the animation part. The ball isn't centred, and when I put @keyframes updown, it makes the ball bounce…
digitalsara
  • 65
  • 1
  • 5
3
votes
1 answer

Elements on CSS 3D z-axis overlap

I'm trying to arrange elements on a z-axis and want to order them. As you can see in the example, the second section looks like if it's above the first element (pink background) but has a lower value on the z-axis (-2500px). What am I…
Volker Andres
  • 849
  • 14
  • 32
3
votes
0 answers

Google Chrome css transform bug: translate3d not working for an absolute div, after changing display from 'none' to 'block'

In Google Chrome I have found the following bug: I have a fixed sized div, with position: absolute, and with a simple transform: -webkit-transform: translate3d(100px, 100px, 0px) I change the display of the div from 'block' to 'none' and then to…
Radu Brehar
  • 155
  • 2
  • 7
3
votes
0 answers

translate3d causing longer recalculate style phases than positioning with top/left?

I'm trying to dive deep into browser rendering and came up with this little demo in preparation for a talk. I put together a animation demo where you can easily switch scheduling from requestAnimationFrame to setInterval and also positioning from…
Christoph
  • 26,519
  • 28
  • 95
  • 133
3
votes
0 answers

CSS transform translate3d image animation strange anti-aliasing behavior causes jitter

I have a jsFiddle example of an image animating from left to right using CSS3 translate3d, here: http://jsfiddle.net/Rhx2K/3/ I have a requestAnimationFrame looping 60fps and setting the left position of a JPG image on every frame at sub-pixel…
Allen
  • 2,717
  • 2
  • 30
  • 34
3
votes
3 answers

Firefox Mobile: element animated with translate3d flows out from parent container

I have an element which I animte with translate3d transform. The parent element has overflow: hidden, but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element. Animating the top property instead of…
istvan.halmen
  • 3,320
  • 1
  • 23
  • 29
3
votes
2 answers

Firefox bug with translate3d on a flash element

There is a bug in FireFox in which any flash element who's parent (or ancestor) element is translated will be not be rendered. If the translation is removed it immediately appears. Here's an example: …
Luke Channings
  • 1,053
  • 9
  • 18
1
2
3
…
9 10