css-transforms

I have a simple "pulsating" effect on the play-button (which is an anchor tag), using CSS3 and keyframes. While it works flawlessly in Chrome and Safari, it doesn't seem to be working in Firefox. Does anyone have an idea on why? li > a { -webkit-animation: pulsate 3s ease-in-out; -moz-animation: pulsate 3s ease-in-out; -o-animation: pulsate 3s ease-in-out; animation: pulsate 3s ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes pulsate { 0% {

I've often been told that CSS 3D transforms are hardware accelerated in Mobile Safari which makes me wonder if the implication is that 2D transforms are not? I can think of no reason why they wouldn't be, since they can basically all be implemented as 3D transforms, but I would like to know for sure. If it turns out that 2D transforms are not hardware accelerated, any insight as to why would be much appreciated. You're right, CSS 2D transforms aren't hardware accelerated in Mobile Safari, but 3D transforms are. I'm not sure why it's that way, but perhaps they decided it was overkill for most

I am using css 3d transforms in my project. I am trying to apply a new transform on the containing element of several other elements. I am also trying to use getBoundingClientRect on one of its child elements. That container also has other elements in it. When the container has this value for the transform css property: translateZ(1026px) rotateX(-90deg) rotateY(180deg) translateZ(439.001px) here's what element.getBoundingClientRect().top for that certain child element is: 77.953109741210944 according to chrome's developer tools but when I use the elements tab to change the `transform property

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 transforms from the center of the current element as desired. the problem When you are transforming an

I want to set several transform options for my html object but with different duration and delay. If i try to use something like that: -webkit-transition: -webkit-transform, opacity; -webkit-transform: rotate(180deg) scale(2); -webkit-transition-duration: 2000ms, 6000ms; -webkit-transition-delay: 0ms, 6000ms; Then i will have different time function for transform and opacity but can i set different options for rotate and scale, e.g. rotate for 10s and scale 20s? Probably not directly, but the same effect can be achieved by nesting elements . Michael Mullany Yes you can do this directly with

I've a pretty basic example here, am having a fixed header with other elements which are stacked one after another, single element is transformed using transform: rotate(360deg) . So only the transformed element is getting over the fixed bar when the page is scrolled, where other elements doesn't. So the question is do transformed elements have default z-index ? When you use z-index: -1; for .transform_me it behaves normal Demo CSS .fixed { height: 30px; background: #f00; position: fixed; width: 100%; top: 0; } .transform_me { transform: rotate(360deg); -webkit-transform: rotate(360deg); }

I noticed that there is a big quality difference when transforming text in this 2 ways: .text1 { width: 200px; height: 22px; position: absolute; top: 40%; left: 0; transform-origin: 50% 50%; transform: scale(2); /* here */ color: red; text-align: center; font-size: 22px; } .text2 { width: 200px; height: 22px; position: absolute; top: 60%; left: 0; transform-origin: 50% 50%; transform: translateZ(400px); /* here */ text-align: center; font-size: 22px; } .perspective { width: 200px; height: 200px; perspective: 800px; transform-style: preserve-3d; } <div class="perspective"> <div class="text1"

I have a wrapper box that I want to animate with transform translate but if I do this I can't use fixed element inside. example : <div class="wrapper"> <div class="box-content"> <div class="fixed-element"> </div> </div> </div> <style type="text/css"> .wrapper { transform: translateX(50px); background: pink; } .box-content { height: 1000px; background: green; } .fixed-element{ position: fixed; top: 0; left: 0; width: 50px; height: 50px; background: blue; } </style> https://jsfiddle.net/aobv5azy/ I don't want use javascript, and I want use transform translate. Animate with "left" is not good for

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 have the scrollbar, but still the white space issue Firefox = white space issue We need the overflow

I'm facing a problem, I have a div with an absolute position, and I'm trying to rotate it 360 degrees with an endless looping. But if I use the transform: translate (-50%,-50%) to fully center this div, it won't work properly. HTML <div class="randomName"></div> CSS .randomName { background-color: orange; width: 1500px; height: 1500px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: orbita 2s linear infinite; -webkit-animation: orbita 2s linear infinite; -moz-animation: orbita 2s linear infinite; -o-animation: orbita 2s linear infinite; } @keyframes orbita