css-transforms

CSS3 Transform affecting other elements with chrome/safari

由 血红的双手。 提交于 2019-11-26 09:48:06
问题 I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn\'t have a resolution with the issue. http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text. 回答1:

CSS-Filter on parent breaks child positioning

由 给你一囗甜甜゛ 提交于 2019-11-26 08:59:45
I am currently working on a website and encountered this weird behaviour. I am not sure if it is a bug or how to deal with it so I'm asking you guys for help. So I have this title-screen "animation" that has the title centered in a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working example with the expected behaviour, from which I stripped all unnecessary code to make it minimal: $(window).scroll( () => { "use strict"; let windowH = $(window).height(); let windowS = $(window).scrollTop(); let header = $("#header").height(); if

jQuery Drag/Resize with CSS Transform Scale

由 北慕城南 提交于 2019-11-26 08:59:31
问题 I am applying a CSS transform (and the browser specific -webkit, -o etc): transform: matrix(0.5 , 0 , 0, 0.5, 0 , 0); to a div then using jQuery\'s draggable() and resizable() plugins on children of said div. The problem I had was that when dragging or resizing the child elements, the alteration jQuery made were out of \"sync\" with the mouse by a factor equal to the scale applied. I found a solution on stackoverflow (though I stupidly did not bookmark it and now cant find it....) that

Flip a 3D card with CSS

由 余生长醉 提交于 2019-11-26 07:48:53
问题 I\'m trying to make a 3D card flipping effect with CSS like this. The difference is that I want to use only CSS to implement it. Here is the code I tried: /*** LESS: ***/ .card-container { position: relative; height: 12rem; width: 9rem; perspective: 30rem; .card { position: absolute; width: 100%; height: 100%; div { position: absolute; height: 100%; width: 100%; } .front { background-color: #66ccff; } .back { background-color: #dd8800; backface-visibility: hidden; transition: transform 1s; &

CSS Transform Skew [duplicate]

由 孤者浪人 提交于 2019-11-26 07:33:29
问题 This question already has an answer here: Responsive CSS Trapezoid Shape 2 answers Does anyone know how to achieve skew like this: Using CSS\'s new transform property? As you can see I\'m trying to skew both corners, anyone know if this is possible? 回答1: CSS: #box { width: 200px; height: 200px; background: black; position: relative; -webkit-transition: all 300ms ease-in; } #box:hover { -webkit-transform: rotate(-180deg) scale(0.8); } #box:after, #box:before { display: block; content: "\0020";

Spin or rotate an image on hover

由 允我心安 提交于 2019-11-26 07:28:44
问题 I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code : img { border-radius: 50%; } <img src=\"http://i.imgur.com/3DWAbmN.jpg\" /> 回答1: You can use CSS3 transitions with rotate() to spin the image on hover . Rotating image : img { border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } img:hover { -webkit-transform: rotate

Simulating transform-origin using translate

由 妖精的绣舞 提交于 2019-11-26 06:49:56
问题 I want to simulate the properties of transform-origin using transform: translate in CSS. According to MDN, this is very possible: This property is applied by first translating the element by the negated value of the property, then applying the element\'s transform, then translating by the property value. However, when I try, I get incorrect results. These two rectangles are clearly not the same: .origin { transform-origin: 100px 100px; transform: translate(100px, 0px) scale(2) rotate(45deg);

How to prevent Webkit text rendering change during CSS transition

由 允我心安 提交于 2019-11-26 06:15:02
问题 I\'m using CSS transitions to transition between CSS transformed states (basically transitioning the scale of an element). I notice that when the element is transitioning, the rest of the text on the page (in Webkit) tends to slightly alter its rendering until the transition is done. Fiddle: http://jsfiddle.net/russelluresti/UeNFK/ I also noticed that this does not occur on my headers, which have the -webkit-font-smoothing: antialiased property/value pair on them. So, I\'m wondering, is there

3D CSS transform, jagged edges in Firefox

由 不羁的心 提交于 2019-11-26 06:04:59
问题 Similary to \"css transform, jagged edges in chrome\", same occurs with Firefox on 3D transforms, eg: http://jsfiddle.net/78d8K/5/ (<- remember: Firefox ) This time, backface-visibility doesn\'t help :( Any idea? 回答1: Edited answer: (after comments) "Workaround", add a transparent outline attribute: outline: 1px solid transparent; Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/nKhr8/ Original answer: (background-color dependent) "Workaround", add a border attribute with the same

Why does order of transforms matter? rotate/scale doesn&#39;t give the same result as scale/rotate

由 点点圈 提交于 2019-11-26 04:56:13
问题 After combing through the SVG specification, and guides such as this and this, I am still struggling to understand exactly how chaining transforms work. Selected Relevant Quotes When you apply the transform attribute to an SVG element, that element gets a \"copy\" of the current user coordinate system in use. And: When transformations are chained, the most important thing to be aware of is that, just like with HTML element transformations, each transformation is applied to the coordinate
订阅 css-transforms