css-transforms

ie8: is there possible to have transform in pseudo element?

由 余生长醉 提交于 2019-12-22 10:09:15
问题 i need css transform work on ie8, is there possible to do that? i tried progid:DXImageTransform but it is not working on pseudo element .stack.twisted:before { -ms-transform:rotate(8deg); /* IE 9 */ -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); transform: rotate(8deg); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678

Does IE11 support css 3d transforms fully (preserve-3d)

由 你。 提交于 2019-12-22 06:08:21
问题 I am making a css 3d transforms web app, and I would like IE11 to be supported if possible. I know IE10 does not support the preserve-3d value for the transform-style css attribute, but I'm not sure about IE11. I have read some stuff that says that IE11 should support it, but the examples I tried didn't work properly (IE11 on Windows 8.1 here). So, does IE11 fully support css 3d transforms and preserve-3d ? 回答1: Microsoft are adding support for transform-style: preserve-3d . It is supported

Does IE11 support css 3d transforms fully (preserve-3d)

由 泪湿孤枕 提交于 2019-12-22 06:07:04
问题 I am making a css 3d transforms web app, and I would like IE11 to be supported if possible. I know IE10 does not support the preserve-3d value for the transform-style css attribute, but I'm not sure about IE11. I have read some stuff that says that IE11 should support it, but the examples I tried didn't work properly (IE11 on Windows 8.1 here). So, does IE11 fully support css 3d transforms and preserve-3d ? 回答1: Microsoft are adding support for transform-style: preserve-3d . It is supported

Move transform-origin back to the center of the element in CSS

由 空扰寡人 提交于 2019-12-22 04:27:26
问题 When CSS elements are transformed out of their original location the transform-origin doesn't move with them; making all subsequent transforms and rotations still originate from it's original transform-origin ( example below ). There is one way around this that I know of... and that's to keep adding all new transforms to the right of the previous ones. like this: transform: translateY ( -5rem ) rotate( 45deg ) translateY( -10rem ) rotate( 15deg )... etc. This seems to always start the new

Get 3D CSS rotation value from matrix3d() with JavaScript

由 爷，独闯天下 提交于 2019-12-22 01:30:12
问题 I have an element 3D transformed something like this: .foo { transform: rotateX(-30deg) rotateY(35deg); } Now I want to get these values via javascript. It's easy to get the 3D matrix: var matrix = $('.foo').css('transform'); // return: // matrix3d(0.819152, -0.286788, -0.496732, 0, 0, 0.866025, -0.5, 0, 0.573576, 0.409576, 0.709406, 0, 0, 0, 0, 1) But is it possible to calculate CSS like values -30 and 35 with that matrix? I just found ways to do this for 2D transforms. 回答1: Ok, got it! var

CSS3 Scale, Fade and Spin on the same element (why isn't SCALE working?!?)

由 瘦欲@ 提交于 2019-12-22 00:40:38
问题 OK noobs. Need this circle to scale and fade in once at the beginning of the animation (while spinning) and continue to spin thereafter. Not that hard right!?! Got the fade and spin working but scale just refuses to work! Is there a fat finger somewhere? Before I rip out what hair I have left, please expose my noobness and why SCALE is not working ? Thank you, that is all... Latest FF only. (To lazy to code for everything else.) JS Fiddle EXAMPLE <!DOCTYPE html> <html> <head> <style> div

Cross-browser height 100% on transform scale <1

由 穿精又带淫゛_ 提交于 2019-12-22 00:23:09
问题 I can't seem to find a way to make the height of the child container to be 100% of the parent and just see scrollbars. Instead we see double the amount of white space for the height. This question is related to Javascript zoom in/out to mouse x/y coordinates If we don't have overflow set in the main container then in Chrome works Safari = works, but we don't have an x-axis scrollbar Firefox = white space issue If we set overflow: auto or scroll then in Chrome = white space issue Safari = we

Why doesn't IE10 display nested CSS3 3D transformed elements?

由 ﹥＞﹥吖頭↗ 提交于 2019-12-21 12:29:24
问题 i'm a bit lost here, i'm currently testing the IE10 (10.0.9200.16384) that came with the Windows 8 Release Preview, and i'm having a very hard time. One of the things that are bugging me, is that IE doesn't seem to handle nested 3D Transforms corrently. Please see this fiddle: http://jsfiddle.net/uUHdF/1/ There are two colored divs, a red one, and a green one rotated and translated so that it acts as the top of a cuboid, and this cuboid itself is rotated and translated too (note that i can't

Hover state is maintained during a transition even if the element has gone

由 别来无恙 提交于 2019-12-21 07:30:09
问题 Consider a simple element, and its associated CSS: <div id="content">Hover me !</div> #content { width: 100px; height: 100px; } #content:hover { transform: translateY(500px); transition: transform 1s 500ms; } JSFiddle The principle is straightforward: while the element is hovered, it must go down. The problem is, when the mouse doesn't move , that the :hover state is maintained even if the element is not physically below the mouse anymore (due to the translation). The state seems to be

CSS Transform not working in IE 8

由 廉价感情. 提交于 2019-12-21 05:00:53
问题 I am attempting to rotate or transform a div using the CSS Transform property. Here is my transform CSS Code: -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); transform: rotate(270deg); The above code works great in all but IE 8. I need to find a way to support IE 8. How can I create a fallback for IE8? Note: I am using jQuery (1.8.2), HTML 5 Doctype
订阅 css-transforms