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
3
votes
1 answer

Zynga Scroller - Set a starting offset for a scrollable area

Anyone familiar with the Zynga Scroller JS library? How do I set a default offset for a scrollable region? I set the CSS for the element using: -webkit-transform' : 'translate3d(200px, 0px, 0) scale(1) Assuming I want a 200px offset for the…
matthoiland
  • 912
  • 11
  • 24
3
votes
1 answer

-webkit translate3d stutters with large elements

I'm animating elements using -webkit-transform: translate3d(x,y,z) and the cubic beizer timing function combined with touch-events for the iPhone to make a custom scrollmethod type thing. Trouble is, the animations stutter (element stops for half a…
jenswirf
  • 7,087
  • 11
  • 45
  • 65
3
votes
2 answers

What is the formula for proportions of elements using perspective and translateZ?

I would like to do the following: Given a container with perspective and an inner element with a translateZ value I'd like to "pull it up" with translateY in order to visually touch the top of the surrounding container:…
Seka
  • 1,413
  • 2
  • 12
  • 16
2
votes
1 answer

does translate3d perform better with css3 animations?

I have been searching and spending lot's of hours on the web to get smooth animations. Is it correct that when you set a element properties like below using the translate3d propertie that it will automatically trigger hardware cpu…
chriscross
  • 41
  • 1
  • 4
2
votes
1 answer

Android Webkit Input elements buggy with CSS3 translate3D

I'm having a couple issues with the Input element in a Webkit Android App i'm developing. Testing on 2.X, but 3.x doesn't seem to have these issues... The app works by having separate Div's for each "page", and I'm using CSS3 translate3D to animate…
Dansl
  • 21
  • 4
2
votes
3 answers

React-Slick - transform: translate3d - Not working on smaller resolutions

I am using next.js and fetching data via API to slides. React-slick works great until the first break point on lower resolution (890px in this example). .slick-track class has a property that is causing this problem. .slick-track {transform:…
2
votes
0 answers

Chrome + webkit translate3d, mangles images

This is a bit weird. When I apply -webkit-transform: translate3d(0px, 0px, 0px); to images on a site I am building, they look fine initially. But when I start scrolling or resize the browser window to above a certain size (roughly past 1200x1024)…
Kasper
  • 1,282
  • 4
  • 20
  • 39
2
votes
3 answers

CSS 3D transformed html element with negative z-value doesn't fire events

In the following scenario, we see two divs with applied CSS3 3D transformations within a container. Both should fire a event when they are clicked. In this case an alert is shown, indicating which div was clicked. …
Benjamin
  • 217
  • 2
  • 10
2
votes
0 answers

CSS transforms scale and translate laggy only on Firefox

I am animating a header on hover with the transforms scale() and translate3d(). My Typescript listens on mousemove over three different div and changes the translate3d style of an svg image accordingly. Everything works as expected on Chrome and…
2
votes
1 answer

Using translate3d and scale for transformations

I wanted to make a div that follows the cursor and simultaneously grows/shrinks as an animation. I changed the position of the div using top and left but the animation is sometimes a bit choppy. I wanted to use translate3d to make the animations…
prateek
  • 305
  • 3
  • 8
2
votes
1 answer

Transform Translate 3d with JQuery

I have a small problem I try to animate div on scroll but it looks like I made a mistake somewhere At the very beginning, when loading the page, positioning does not take place in the center of the window, as I indicated, but with an offset to the…
2
votes
1 answer

Maintaining a CSS translate3d position when swapping classes

I have an infinite scrolling background image in a div as you can see in the below snippet. The idea behind this is that its a timeline that I can change the speed of, ie. Normal speed, Fast, Slow and even Reverse. Using javascript I can…
Aidan
  • 757
  • 3
  • 13
2
votes
0 answers

translate3d has inconsistent behavior in Safari vs Chrome/Firefox when using perspective

When using translate3d to move an absolute positioned object, while also using perspective to modify the translate3d view, Safari does not function the same as other browsers. Image with visual representation of issue If the object is not positioned…
2
votes
3 answers

3d cube face rotation transform-origin misplaced

I have this 3d cube: http://codepen.io/caemostajo/pen/yORNvx/ , the front and left faces open when click on the 2nd button. As you can see the left face is misplaced, i can't place it where it belongs mantaining its open animation. it should look…
2
votes
2 answers

CSS - translate3d doesn't seem to do anything?

I don't get this, it seems like a bug, but it's consistent through several browsers. So the bug must be in my own head. Basically, I've got this block with an image and some text. The heading inside this block is composed of several span elements…
Kenny Bones
  • 5,017
  • 36
  • 111
  • 174
1 2
3
9 10