css-transforms | 易学教程

3D Transform (rotateY) in Chrome and Firefox do react differently

阅读更多关于 3D Transform (rotateY) in Chrome and Firefox do react differently

问题 I created a CSS 3D Transformation for a logo div within a header of my page. On hover the logo gets rotated. Everything looks fine in Chrome, but Firefox renders it completely different. I moved the transform origin to the left side of the logo div. When rotating the right side of the div gets "compressed" to get the visual 3D effect. In Firefox the logo div only gets smaller but not "compressed" and you can't see a 3D effect. The Code: <!doctype html> <html lang="de"> <head> <meta charset=

transform3d(): Using Percentage to Move Within Parent Object

阅读更多关于 transform3d(): Using Percentage to Move Within Parent Object

问题 CSS has standard behavior, when moving an object in percentage, that this percentage represents dimensions of its parent container (div). This is not true when using CSS3 transform: translate3d() . If using percentage values for either X, Y, or Z coordinate, the percentage represents dimensions of the current object , not its parent. The problem should be obvious now: if I need to use CSS3 animation and transform: translate3d() to move current object within dimensions of its dynamically re

CSS rotate and postion on left top Corner

阅读更多关于 CSS rotate and postion on left top Corner

问题 I rotated a div with Text & wanted to Place it on the left top. I managed to place it at the top, but I can't get it working to align with the left edge. How do I do this? .credit { position: absolute; background-color: pink; transform: rotate(-90deg) translateX(-50%); } <div class="credit"> Picture by Name </div> 回答1: Change the transform-origin to top left and make the translation -100% body { margin:0; } .credit { transform-origin: top left; position: absolute; background-color: pink;

Extend the final state of the first animation for translated element

阅读更多关于 Extend the final state of the first animation for translated element

问题 I know this is asked multiple times here, but I am asking for a different approach for these kind of animations. Problem: The 2nd box has multiple animations, trying to create the same effect as 1st one. It seems like the transform property is getting overwritten (as it should)* . I am trying to extend the 1st animation (of 2nd box) with the properties of 2nd animation. Tried to use animation-fill-mode: forwards but with no success. Maybe I am missing something basic. Is it possible with

How to get scale works cross-browser in center position on SVG elements with CSS

阅读更多关于 How to get scale works cross-browser in center position on SVG elements with CSS

问题 I have some SVG elements, which should be scaled on hover (see the attached code snippet below please). It works well on WebKit browsers (adding transform-origin: 50% 50%; to g element did the job). But Firefox seems to scale it in own way (like need to get some extra translate(x,y) and Edge doesn't scale it at all. What are your suggestions? Am I doing it wrong or should use a separate styling for different browser engines? I would like to solve it with CSS however, this is just an example.

How to get scale works cross-browser in center position on SVG elements with CSS

阅读更多关于 How to get scale works cross-browser in center position on SVG elements with CSS

CSS animation restarts if I move the mouse when the container retracts. Can you avoid this?

阅读更多关于 CSS animation restarts if I move the mouse when the container retracts. Can you avoid this?

问题 I would like to keep the animation continuing till the end not restart when I move the mouse inside the element but the cursor (mouse pointer) is always inside the original element. Is it possible? My code is: Fiddle Demo .container{ height: 200px; width: 100px; } .conteiner li{ display: inline-block; float: left; text-align: center; height: 100%; width: auto; background-color: white; } .conteiner li a{ position: relative; display: flex; align-items: center; justify-content: center; padding:

-webkit-transform: using position:absolute

阅读更多关于 -webkit-transform: using position:absolute

问题 I have a series of divs that slide down using -webkit-transform from a negative margin-top to a position on the screen. Problem is that they end up where they would normally be sitting if there was no negetive margin-top applied to them. This means if I show the 2nd div it has an empty space the size of the first div above it. To solve this I can apply a negative margin-top to the 2nd div, but I think thats messy. My main concern is that if the height of dropdiv1 changes then I would have to

css transform element affects other element which use transform:scale(0.5) in android webview

阅读更多关于 css transform element affects other element which use transform:scale(0.5) in android webview

问题 div.tp-border-bottom's border hide when div.tp-banner add transform property, if I set div.tp-border-bottom:after element height to 2px then it is visible, all of this in android webview platform .tp-banner { width: 100px; height: 60px; -webkit-transform: translate(0px, 0px) translateZ(0px); transform: translate(0px, 0px) translateZ(0px); } .tp-border-bottom { position: relative; width: 100px; height: 60px; } .tp-border-bottom:after { content: ""; position: absolute; font-size: 0; line-height

css - div at incorrect position on Firefox

阅读更多关于 css - div at incorrect position on Firefox

问题 I'm making a card with css animations, and on Chrome/Safari it works great, but on Firefox one of the divs is getting out of its position. Open this fiddle on Chrome/Safari and on Firefox to see what is going on. Does anybody know a fix/workarround to this? 回答1: I managed to get Firefox to play nicer by adding .perspective { ... position: relative; } That seems to specify the object to which the left side is the absolutely positioned. It must differ by default between Webkit and Firefox.