Stack Overflow
Stack Overflow

Questions tagged [webkit-perspective]

28 questions
4
votes
3 answers

What is the math behind -webkit-perspective?

"Simple" question that I can't find the answer to -- What does -webkit-perspective actually do mathematically? (I know the effect it has, it basically acts like a focal-length control) e.g. what does -webkit-perspective: 500 mean?!? I need to find…
user578895
4
votes
1 answer

"position: absolute" in a child doesn't work if body has perspective

I faced a problem while building a simple CSS transition. I have my body element which its only child is a div with position absolute. Inside the div I inserted a rectangle with a simple 3d transition on the hover pseudoclass: transform:…
Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63
4
votes
1 answer

Checking hardware acceleration availability? (Testing available)

I've written CSS that uses -webkit-transform, -webkit-perspective and several similar. My design looks the bees knees on machines where hardware acceleration is available but is practically unusable when not. How can I check hardware acceleration…
Martin Joiner
  • 3,529
  • 2
  • 23
  • 49
3
votes
2 answers

Chrome bug border-radius+overflow with perspective

I'm having a strange problem with Chrome. If I create a div with some perspective, border radius, overflow hidden and a transformed div inside the element wont respect de perspective. http://codepen.io/cavax/pen/MwPgxz If I remove the border radius…
Dtnand
  • 449
  • 3
  • 14
2
votes
1 answer

How to modify a CSS tag value dynamically using javascript

Perspective based rotation : I have a div which i want to rotate in CSS3 using webkit. The div is rotated after a usermouse down event in jquery I use keyframes to do that @-webkit-keyframes rotate { enter code here 0% { -webkit-transform:…
user1184100
  • 6,742
  • 29
  • 80
  • 121
2
votes
1 answer

How to position element in the correct 3d position with css perspective

I'm trying to find a way to map an element, on top of a photo element that is placed at a given angle. The photo of a laptop is a good example, where I'd like to map an element (video, image, or other) on top of the screen, for example, let's say to…
punkbit
  • 7,347
  • 10
  • 55
  • 89
2
votes
2 answers

Safari perspective transform cuts off text

So I am trying to add a perspective transform on an element but it is cutting off the text in Safari. If you open the following CodePen in Chrome it displays normally, but in Safari the white text is cut off. I have searched other questions but none…
chap
  • 1,860
  • 5
  • 24
  • 39
1
vote
0 answers

Use CSS3 transform to fit element perfectly

I'm trying to fit a youtube video to a phone's display but I can't figure out the perfect values. There's always a corner that not fits. transform: rotate3d(-131,-46,54,-53deg) skew(-5deg) skewX(10.2deg) skewY(1.9deg) perspective(82px)…
Erik Simon
  • 11
  • 3
1
vote
0 answers

Perspective calculation in CSS3

When you use 'perspective' property in css3, in fact it gives you different element height.
For div with height…
Nikolas
  • 13
  • 1
  • 5
1
vote
0 answers

Bug with CSS-Perspective on Element and Smooth Scrolling with JavaScript

I'm having a strange problem. I want to build a website which has a perspective set to 1500px. It's a one-page website, so I added a smooth scrolling script. But the problem is, that it doesn't work correctly... If i put off the perspective,…
user3375195
  • 53
  • 6
1
vote
1 answer

Transform: perspective(#) on iOS 8 Mobile Safari glitches and hides element

Using animate.css for a project and have hit a major roadblock on iOS8 Mobile Safari. None of the animations that use perspective are working. This has been identified as a known issue but no solution has been provided. I've included the specific…
Bryce York
  • 956
  • 1
  • 15
  • 35
1
vote
1 answer

Bug with CSS -moz-perspective

I have a mistake with the perspective property.. If you see this JSFiddle code on Google Chrome (v33) and Mozilla Firefox (v28), I have a difference between them.. I can reproduce this error on Chrome if I comment the code : -webkit-perspective:…
Arthur
  • 4,870
  • 3
  • 32
  • 57
1
vote
1 answer

Cannot use css 3d transforms in Opera 12.16

the NVIDIA Quadro FX 1500 graphic adapter on my old XP system is fairly old and seems not on list of supported Chrome HW; however, I managed to enable 3d transforms on Chrome, using this: in address bar, go to chrome://flags/ Override software…
Gisela
  • 1,194
  • 2
  • 16
  • 30
1
vote
1 answer

CSS Perspective, lower numbers should appear larger?

In this example of a cube with different perspectives: http://codepen.io/HugoGiraudel/pen/GLbca The one on the right has -webkit-perspective: 250px; whereas the one on the left has -webkit-perspective: 1000px; According to Mozilla: "The perspective…
Lars
  • 7,908
  • 11
  • 52
  • 70
1
vote
1 answer

Positioning of 3d element in css

I'm having two issues with the positioning of a 3d-transformed element within a div. In the image below, the pink squares are containers for 10-faced "wheels". The perspective origin is set to the middle of each div. The first issue (left wheel)…
gpothier
  • 850
  • 6
  • 12
1
2