webkit-perspective | 易学教程

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

阅读更多关于 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 loop a video etc. The task seemed quite easy but I'm finding it quite tricky, because I couldn't find how to solve it properly with transforms rotate, scale, translate and even skew. Here's a code example of what I want to achieve, the over

Checking hardware acceleration availability? (Testing available)

阅读更多关于 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 availability and provide fallback CSS? Side note: Run chrome://gpu-internals/ to manually check for availability. 回答1: Sadly, the answer seems to be 'you can't (yet)'. The Modernizr project lists HW acceleration amongst its 'undetectables': https:/

How to calculate absolute position of transformed div

阅读更多关于 How to calculate absolute position of transformed div

问题 When you use transform on div, absolute positioning not working as you expected anymore, and seems like it needs to be calculated manually. For instance when you want your div to be at the bottom of container you do: div{ position:absolute; bottom:0%; } But if you transform this div like -webkit-transform:rotateX(angle); it won't be at the bottom of container. Is places somewhere in between of container depends of its size. I create jsfiddle to illustrate this, and also show what i'm trying

Bug with CSS -moz-perspective

阅读更多关于 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: 2500px; -moz-perspective: 2500px; perspective: 2500px; How can I have the same result on the both browsers ? Thank you all for helping and sorry for my bad english. 回答1: You need to set : position:absolute to #header-cube-container instead of #header

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

阅读更多关于 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 loop a video etc. The task seemed quite easy but I'm finding it quite tricky, because I couldn't find how to solve it properly with transforms rotate, scale, translate and even skew. Here's a code example of what I want to achieve, the over element is the SPAN coloured green Html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name=

Checking hardware acceleration availability? (Testing available)

阅读更多关于 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 availability and provide fallback CSS? Side note: Run chrome://gpu-internals/ to manually check for availability. Sadly, the answer seems to be 'you can't (yet)'. The Modernizr project lists HW acceleration amongst its 'undetectables': https://github.com/Modernizr/Modernizr/wiki/Undetectables . Part of the problem seems to be that HW acceleration is

What is the math behind -webkit-perspective?

阅读更多关于 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 the on-screen location of something that's been moved using, among other things, -webkit-perspective The CSS 3D Transforms Module working draft gives the following explanation: perspective(<number>) specifies a perspective projection matrix. This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose

What is the math behind -webkit-perspective?

阅读更多关于 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 the on-screen location of something that's been moved using, among other things, -webkit-perspective 回答1: The CSS 3D Transforms Module working draft gives the following explanation: perspective(<number>) specifies a perspective projection matrix.