css-transforms

问题 How can I vertically center rotated text using flexbox layout? I want something that looks like this: Here's what I have so far: html, body { height: 100%; } body { background-color: #efefef; } body > div { align-content: center; background-color: white; border: 1px solid black; display: flex; height: 100%; width: 25px; } body > div > div { flex: 1; transform: rotate(-90deg); } <div> <div> Where did I go? </div> </div> 回答1: Add white-space: nowrap and center horizontally and vertically using:

问题 How can I vertically center rotated text using flexbox layout? I want something that looks like this: Here's what I have so far: html, body { height: 100%; } body { background-color: #efefef; } body > div { align-content: center; background-color: white; border: 1px solid black; display: flex; height: 100%; width: 25px; } body > div > div { flex: 1; transform: rotate(-90deg); } <div> <div> Where did I go? </div> </div> 回答1: Add white-space: nowrap and center horizontally and vertically using:

问题 I'm trying to make the hover on an element, making it bigger by few percent, but I'd like to have the title and the contents inside stay where they are. If I just add scale(1.05) to the element, the contents will scale as well. If I try to counter scale the inner element with scale(0.95) the size will be like the original, but the placement won't be the same: .container { display: block; width: 100%; padding: 50px; } .element { height: 562px; width: 590px; display: inline-block; position:

问题 I've tried to create this css shape (ribbon) using border radius but I'm unable to do so, the curve I'm able to get isn't exactly matching the div's curve in the image. background: #008712; width: 89px; height: 22px; box-shadow: #d0dae0; background-color: #008712; border-bottom-left-radius: 70px; } If I get this curve right that solves the problem, I would like avoid svgs if possible. 回答1: Use pseudo element with some skew transformation: .box { width:200px; padding:8px; font-size:25px; color

问题 I've tried to create this css shape (ribbon) using border radius but I'm unable to do so, the curve I'm able to get isn't exactly matching the div's curve in the image. background: #008712; width: 89px; height: 22px; box-shadow: #d0dae0; background-color: #008712; border-bottom-left-radius: 70px; } If I get this curve right that solves the problem, I would like avoid svgs if possible. 回答1: Use pseudo element with some skew transformation: .box { width:200px; padding:8px; font-size:25px; color

问题 This question already has answers here : z-index is canceled by setting transform(rotate) (6 answers) Which CSS properties create a stacking context? (1 answer) Closed 2 years ago . Why is it that the animation changes the z-index? If you look at the jsfiddle, you'll see the red image is on top but if you comment out the animation, the blue image is on top. How can I get the blue image to always be on top even with the animation? jsfiddle HTML <img class="blue" src="http://via.placeholder.com

问题 Currently I'm using the following code to translate both x and y at the same speed: -webkit-transition:all 180ms ease-out; I would like to translate the X axis slower than the Y. Is it possible to specify something similar to: -webkit-transition:translateX 180ms ease-out; -webkit-transition:translateY 50ms ease-out; Thanks in advance! 回答1: Sad but true: you can't use different timings for different parts of transform since it's now only one property and cannot be spliced. The only things you

问题 I am aware of the CSS transform: rotate property, and the methods used to make an angled div element, but there is one very important design element that I cannot find addressed anywhere: How to keep the boundary box angled When I create angled div elements, I use a wrapper element that is rotated by n degrees, and then the child element (often a span ) that's rotated -n degrees. Unfortunately, this causes the child element to have its own rectangular boundary independent of its parent

问题 I got a container with unknown nested elements and I would like to move a selected child target around using js + transform translation. The problem I have is that a parent element can be scaled so the selected target moves faster/slower depending on the scale. And rotation makes it also harder to move it in the direction of the mouse movement. How should I go about solving this problem? My assumption is that I need to walk up the DOM tree and combine all the matrixes and add, subtract values

问题 I created an isometric 10x10 field with: transform : rotateX(60deg) rotateY(0deg) rotateZ(-45deg) Is there any property that modifies divs "z-heigth", allowing me to give each of the inner cells a different "depth", creating a column? Cell and Table current code: #table { width: 600px; height: 600px; background-color: white; display: flex; flex-direction: row; flex-wrap: wrap; transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) } #table>DIV { width: 58px; height: 58px; background-color: