Stack Overflow
Stack Overflow

Questions tagged [webkit-transform]

The webkit-transform properties provide some easy-to-use functions for the most common operations (such as rotate, scale, skew and translate) and a function to specify a generic transformation (matrix).

CSS property: -webkit-transform

Description Specifies transformations to be applied to an element.

The -webkit-transform property specifies a list of transformations, separated by whitespace, to be applied to an element, such as rotation, scaling, and so on.

The set of transform functions is similar to those allowed by SVG, although there are additional functions to support 3D transformations. If multiple transforms are applied, the transform is generated by performing a matrix concatenation of each transform in the list.

Syntax:

-webkit-transform:translate(dx,dy);
-webkit-transform:scale(sx,sy);
-webkit-transform:rotate(r);
-webkit-transform:translate(dx,dy) scale(sx,sy) rotate(r);

links:

-webkit-transform

102 questions
33
votes
2 answers

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth"…
Rahul
  • 12,181
  • 5
  • 43
  • 64
27
votes
1 answer

CSS Scale an element with 100% width

I am interested in zooming out a div with 100% width. The problem I am having, is when I scale the element out it gets a fixed width and no longer extends 100% of the width. Example - http://jsfiddle.net/Fz7qh/2/ When I use the CSS zoom property (as…
levi
  • 23,693
  • 18
  • 59
  • 73
21
votes
1 answer

Unwanted left margin when using -webkit-transform: scale(...)

I am using wkhtmltopdf (which uses the Webkit rendering engine) to convert HTML files to PDF documents. The generated PDFs are A4. In other words, they have fixed dimensions, and thus a limited width. One of the tables in my PDF contains images,…
Kosta Kontos
  • 4,152
  • 7
  • 25
  • 28
14
votes
3 answers

How to get screen position of CSS3-3d transformed elements?

I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted. I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I…
user578895
12
votes
1 answer

CSS3 how to calculate height and width after scale

Is there any jQuery solution that to find exact display height of the -webkit-transform: scale(0.7851); the scale value may vary that is why looking for proper solution Tested these options unfortunately didn't find solution yet :(…
Mo.
  • 26,306
  • 36
  • 159
  • 225
10
votes
2 answers

Getting the size of a CSS3 transformed element

I'd like to retrieve the size of a div that I've applied a CSS3 transform to. -webkit-transform: scale3d(0.3, 0.3, 1); So, effectively I've made the element 30% of its original size. However, when I query the elements width/height it reports the…
swervo
  • 749
  • 6
  • 15
9
votes
1 answer

Mobile Safari not showing CSS transform rotateX and rotateY only rotateZ

This is weird. I'm playing with device orientation but can't seem to get rotateX and rotateY to work in Safari (iOS 8.0.2). But! if I save it to my home screen with apple-web-app-capable meta tag it works fine. This is my script: $( document…
Fritiof Konkas
  • 103
  • 1
  • 6
8
votes
1 answer

Can't scroll inside a div after applying -webkit-transform in Safari

I am building a slide menu. The menu is long and I need to be able to scroll inside of it, so I have set overflow-y: scroll on it. I am using -webkit-transform (and variants on other browsers) as the transition property. Now I can't scroll inside…
Bruno Cloutier
  • 1,003
  • 2
  • 10
  • 11
7
votes
2 answers

Add a transform value to the current transforms that are already on the element?

Let's say I have a div that had translateX and translateY values added dynamically.
I want to add…
nuway
  • 2,324
  • 4
  • 27
  • 48
7
votes
3 answers

jQuery draggable and -webkit-transform: scale();

I have a situation where inside a div there are draggable items. However, when the parent div is scaled using -webkit-transform, the draggable obviously stops working properly. I've reproduced the scenario here. As you can see, the draggable item…
Martti Laine
  • 12,655
  • 22
  • 68
  • 102
7
votes
3 answers

Adjusting parent element of css-transformed image to fit. (Twitter Bootstrap)

I am currently using Twitter Bootstrap on a new project. The main part of the project is a thumbnail gallery, exactly like the one they have in their examples (here: http://twitter.github.com/bootstrap/components.html#thumbnails). Problem is I am…
malvim
  • 1,194
  • 1
  • 8
  • 17
6
votes
1 answer

webkit-transform alternative for Firefox

Is there any alternative to -webkit-transform CSS rules in Firefox?
clamp
  • 33,000
  • 75
  • 203
  • 299
6
votes
1 answer

webkit transform scale making items disappear

I am trying to scale a div in my HTML page. This div contains a lot of canvas elements and other div elements. Basically this div acts as the container for all other items in the page. With Chrome "23.0.1271.95 m" and IOS6.0 safari, the items…
hello512
  • 379
  • 4
  • 16
6
votes
1 answer

Android 2.3 Browser Fails to Render some CSS3 2D Transforms

I'm having trouble getting CSS3 2D Transforms to work in Android 2.3 with any browser that uses the default webkit engine (e.g. default browser, Dolphin HD, Amazon Kindle Fire Silk browser, etc). The Android 2.3 webkit engine does support 2D…
user1634149
  • 71
  • 1
  • 2
5
votes
2 answers

Scaling input boxes with -webkit-transform

I applied the following CSS transform to an HTML input box. -webkit-transform: scale(.5); When I type text into the input box until it has filled the visible area, the caret continues past the edge of the input and is hidden. Normally the caret…
Andrew Stevens
  • 635
  • 5
  • 13
1
2 3 4 5 6 7