css-transforms

问题 For example, let's say we have several sibling elements. With CSS sibling selectors, how could we apply more rotation to each subsequent element in addition to the rotation applied to the previous one? Seems it would be necessary to specify that the origin of the transformation is the result of the previous transformation, but I don't know how to do it. Here's an attempt which obviously doesn't work. transform: rotate(5deg); 回答1: Since these elements are siblings, and not children of each

问题 I cannot get this animation to work in Safari 12 no matter what I try. I've tried vendor prefixes and all, but nothing works. It works fine in Chrome. Anyone have any ideas? <div class="spinners"></div> This is the css: @keyframes spinx { 0% { transform: rotate3d(0, 1, 1, 360deg); } 100% { transform: rotate3d(0, 0, 0, 360deg); } } .spinners { display: block; width: 100%; height: 4rem; overflow: hidden; position: relative; } .spinners:before, .spinners:after { content: ""; width: 4rem; height:

问题 I have a parent div containing child divs (child divs having transform property), so I save this whole HTML content and then render it again in a different page. On rendering the content in different page the size of the parent div is enlarged, so the issue is the translate values remain same. How can I make the translate positions of the child divs relative to the parent div. I had referred to some Stack Overflow answers. From Stack Overflow answers, what I understood is if divs will not

问题 I would like to get an effect of an outer element tilting back along the z axis and an inner element standing up out of it in a normal 2d perspective. In other words given this html <div id="outer"> <div id="inner"></div> </div> I would like the outer element to tilt backwards with its side lines approaching a vanishing point while the inner element's sides are vertical. How do I achieve this? Using the css div { display: inline-block; } #outer { padding: 20px; background-color: blue; -webkit

问题 I am new with radial-gradient and I don't know what are those back lines or spaces between the cubes? How to remove them? * {margin: 0; outline: 0; border: 0;} .round { background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%); background-position: bottom left, bottom

问题 I have an inner div that has been scaled by an arbitrary amount. I would like the size of the container div to be that of the inner div, but instead it is sized as if the inner contents were not scaled. How can I get it to shrinkwrap correctly? #content { background-color: blue; height: 200px; width: 200px; } #scaler { transform: scale(0.5); transform-origin: 0 0; } #outer { background-color: red; display: inline-block; } <div id="outer"> <div id="scaler"> <div id="content"> </div> </div> <

问题 I have a problem with a CSS transformation in Microsoft Edge. In all other browsers it runs fine. In Edge it's flickering as soon you move the mouse out of the transformed image. The enclosing <a> tag does not change from its specifications. Does someone know the solution for this issue? transform: scale(0.4) translateX(0) translateY(-37%); .bildswitch { position: relative; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

问题 jQuery doesn't work well with CSS "transform: scale()" (however with "transform: translate()" it works fine) Please take a look at this simple example: $(document).ready(function() { $('#root').dblclick(function() { $('#box').position({ my: 'right bottom', at: 'right bottom', of: $('#root') }); }) $('#box').draggable({ containment: $('#root'), }); }); body { position: relative; margin: 0; } #root { position: absolute; top: 20px; left: 20px; width: 500px; height: 500px; border: solid 2px red;

问题 Definition In Firefox in order to have real transform-origin: center we have to add transform-box: fill-box . It works very well in casual situations, but there are some problems. When we have small svg's viewBox (eg. <svg viewBox="0 0 10 10"> ) and we have to use floated numbers in order to provide exact center position in svg space there is some strange behaviour — fill-box is ignored. Example https://jsfiddle.net/6jckL4ne/ @keyframes animRotate { from { transform: rotate(360deg); } } svg {

问题 I'm trying to set up a fixed div to the left of a page, 24px from the left and stretching from top to bottom of the page. Inside this div will be navigation and a title. I'm trying to get the title rotated -90 degrees and centered positioned toward the bottom of the div. Having a tough time figuring this out. Looked around a lot of places and not seeing a similar example. I've set up a fiddle with the current code: https://jsfiddle.net/xkLc9xuy/2/ HTML: <div> <article></article> <footer><