css-transforms

http://jsfiddle.net/nicktheandroid/yWKMD/ Look at the example, when you click the element, it rotates around from the front to the back , the problem is that it's not rotating around it's center, it's like it's off balance, hold your mouse at the left border of the front side, click the element, and see how the back side's position is now off. They should be positioned in exactly the same spot. I noticed that when I removed the padding/margin/border, it would rotate fine, but I need to have the padding and border on there. Is there a way to do this with padding and a border - so that it will

I am trying to create a simple effect so that when I hover on the inner most circle, the two outer rings rotate around to create a cool effect. I thought this would be an easy task but I cannot seem to figure out what I am doing wrong. When I hover over the inner circle, all that changes are the two inner rings move towards the bottom right hand corner of the screen, without rotating at all. What am I missing here? Thanks .wrapper { position: relative; width: 400px; height: 400px; margin: auto auto; background: black; } .circle { width: 100px; height: 100px; border-radius: 50%; background

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, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand'); } to make it clear, i

I've got css to do a card flip on a element in 3d space. It works great except for when you scroll up and down the page you randomly get white elements displaying on the page at certain places in Chrome. I've attached an image as an example inside a facebook tab. In chrome windows, the white "boxes" cover up content on occasion. When I comment out the 3d transform css, this doesn't occur. Here is a fiddle ( http://jsfiddle.net/derekaug/QSEvs/ ) of the css that does the 3d stuff. Unfortunately, I can't link to the actual tab yet as it's not public. Fernando Diaz Garrido I have a problem like

I have been playing with animated CSS3 Media Queries, yes I know their practical use is questionable but it is fun. Anyways, I can get boxes/divs/selectors to transition/expand/contract etc on browser resize but I am having problems with transforms. What I am trying to do is make a div flip or rotate at certain resolutions. Think of it as an iPad changing from landscape to portrait and a div flipping when this happens. Is this actually possible and if so what am I missing/doing wrong? Ok, I have it working now. Based on post-erasmus' css I was able to tweak it and get it working 100%. Here's

I'm having a trouble with the effect I want to create. My body in the HTML file it's just a div with two images. I was trying to give animation to the first image in the following way: in 0% it starts at the beginning of the div (the fish's head is on the right) in 100% it ends in the end, but at this point I want to rotate the image and keep that effect until it gets 0% again. (that is, the fish should point towards the left during the reverse motion) But it just rotates in 100% and no more. I don't know if this happens because I don't understand some concept of the animation property. This

As the title says, what are the differences between transform: translate(x, y) and position: relative. Since they both accomplish the same thing (position elements) anyway, then how do they differ in purpose and application? I read an article about centering elements using "transform: translate;" that said it is better to use "transform" due to GPU and optimization reason, but I don't really see the problem since it's not a big deal anyway if you're just re-positioning an element and not animating it. So in the end, how are they both different and in what ways? Basically translate relies on

I'm using Chrome 12 in a Linux 64bit box, but I can't get any of the samples bellow to work: http://www.satine.org/research/webkit/snowleopard/snowstack.html http://www.marcofolio.net/css/3d_animation_using_pure_css3.html http://kevchapman.co.uk/css/webkit-css-perspective-demo/ They all use -webkit-perspective , but the final results differ a lot from the results got in Safari (Windows XP). So, after all, does Chrome support CSS 3D transforms? Or the support is still limited? Thanks! Janus Troelsen Go to the Chromium web SCM interface and check that your GPU isn't blacklisted. Also, go to

I got a weird behavior when working with transform in CSS3. Here is my code: *, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .btn_exchange a { position: relative; text-decoration: none; display: block; width: 150px; float: left; color: #ffffff; font-size: 14px; background: #0ea2d3; box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75); text-align: center; font-weight: bold; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @-webkit-keyframes pulse { 0% { transform: scale(1); }