css-transforms

问题 How do I create a CSS shape in which each side is transformed separately. Something like the shape in the below image. Is that possible using CSS only without images? 回答1: I don't think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS). Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can adjust the

问题 for some reason I can't make my hamburger icon work as expected. I have saw many ways of doing it but I can't figure out what's wrong with mine. this is the result I get: I expect to get the 'X' of course. .hamb span { background-color: black; width: 50px; height: 5px; display: block; margin-bottom: 10px; transition: 0.5s; } .hamb:hover span:nth-child(1) { transform: rotate(45deg); } .hamb:hover span:nth-child(3) { transform: rotate(-45deg); } .hamb:hover span:nth-child(2) { transform:

问题 I have created a simple SVG animation where it animates on click using a simple CSS transition and transform (see here: http://jsfiddle.net/T9hsW/1/). I want the SVG to scale with the user's font-size so I sized it in ems. However, I noticed that if I increase the font-size of my browse using cmd-+ then when I click the SVG, the transform-origin appears to be the old transform origin, not the new one, even though I have used % to set the origin: svg { width: 4em; height: 4em; } .arrow,

问题 On my page I have an element that follows users cursor. What I'm trying to do is to use transform instead top / left with plain javascript. Without any libraries or depencies... The problem is that I need to apply values stored in variables to the transform property. I didn't find anything that could help me... Here is my code: var cursor = document.getElementById('cursor'); document.body.addEventListener("mousemove", function(e) { //storing cursor position as variables var curX = e.clientX;

问题 @keyframes gray { 0% { transform: matrix(1, 0, 0, 1, 0, 0) } 100% { transform: matrix(-1, 0, 0, -1, 20, 20) } } @keyframes lightblue { 0% { transform: translate(10px, 10px) rotate(0deg) translate(-10px, -10px); } 100% { transform: translate(10px, 10px) rotate(180deg) translate(-10px, -10px); } } .gray { float: left; margin-left: 50px; width: 20px; height: 20px; background: gray; transform-origin: 0px 0px; animation: gray linear 1s infinite; } .lightblue { float: left; margin-left: 50px; width

问题 I have an element with a ton of CSS transformations like this: transform: translateX( 0 ) translateY( -1rem ) rotate( 45deg ) translateY( -2.5rem ) rotate( 45deg ) translateY( 5rem ); The order of these properties matter as they affect how the element ends up being positioned on the page. I've done some tinkering and came up with the same exact end result with fewer properties: transform: rotate( 90deg ) translateX( -2.8rem ) translateY( 3.25rem ); You can test this by commenting and

问题 I have an element with a ton of CSS transformations like this: transform: translateX( 0 ) translateY( -1rem ) rotate( 45deg ) translateY( -2.5rem ) rotate( 45deg ) translateY( 5rem ); The order of these properties matter as they affect how the element ends up being positioned on the page. I've done some tinkering and came up with the same exact end result with fewer properties: transform: rotate( 90deg ) translateX( -2.8rem ) translateY( 3.25rem ); You can test this by commenting and

问题 I'm using flex layout in order to render a container div with 3 evenly sized columns. It works just as I'd expect, until I apply a scale transform. When the container is scaled down, thin gaps appear between the content boxes. The issue happens on MacOS Chrome and Safari, but not Firefox. I believe I'm seeing a rendering bug, but wondering if anyone might have ideas for a workaround. Here's a greatly simplified example which demonstrates the problem in Chrome: body { background: black; margin

问题 Given the following markup and style div { width: 300px; height: 50px; border: 1px solid black; display: inline-block; transition: all .1s ease-in-out; background-color: white; padding: 0px 5px; } div:hover { transform: scale(1.2); } label { /*position: relative;*/ } <div> <label>some random text</label> </div> <div> <label>some random text</label> </div> when hovering over the first div some letter from the second div are being "hidden" under the scaled element. When, however, position:

问题 The problem I am running into occurs when trying to animate a web font. Specifically, if the HTML element has a class that defines the font-family and other needed CSS attributes on the :before element as opposed to the element itself, the pseudo content will not get animated. Here is some sample CSS: @font-face { font-family: 'FontAwesome'; src: /** src urls here... **/ } .fa-before:before, .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text