css-transforms | 易学教程

Transform CSS property doesn't work with <a> element

阅读更多关于 Transform CSS property doesn't work with element

问题 I want to scale(x,y) my <a> element when I click on it, but it doesn't work. I use Mozilla Firefox web browser to run the program. Here is my code: scaleElement.html <html> <head> <title>CSS3 Transform and Transition</title> <style> a{ background-color: green; color: white; padding: 10px 20px; text-decoration: none; border: 2px solid #85ADFF; border-radius: 30px 10px; transition: 2s; } a:hover{ transform: scale(2,2); } </style> </head> <body> <center><a href="xyz.html">click here</a></center>

formular to calculate width/height (relative to parent) of container with translateZ inside of parent container with perspective

阅读更多关于 formular to calculate width/height (relative to parent) of container with translateZ inside of parent container with perspective

问题 What is the formular to calculate the widths/heights of child elements with translateZ inside of parent container with set perspective (keyword: "parallax") relative to its parents width/height? I'd like to create a site with parallax effect on both axis. I was able to figure out everything i need for my mockup except one thing. How to calculate the childrens widths/heights when its above 100%. Because of parents perspective and childrens translateZ the childrens widths/heights visually don't

Jerky CSS transform transition in Chrome

阅读更多关于 Jerky CSS transform transition in Chrome

问题 I am using CSS3 transform on a background image to enlarge on hover. I have tested in the latest browsers of Opera, Safari and Firefox and work nice and smooth, however in Chrome the transition is very jerky. Heres is the link, hover over the social icons to see what I mean.. http://www.media-flare.com/pins/ - I have noticed as you resize the browser down to mobile view, it gets worse. I have done a jsfiddle version here and slowed down the transition as it is harder to see. http://jsfiddle

What's the difference between CSS3 translate method and CSS2 relative positioning?

阅读更多关于 What's the difference between CSS3 translate method and CSS2 relative positioning?

问题 It seems that both of them could make the element move from its current position. Are these two methods interchangeable? 回答1: The two methods are not exactly the same thing: Translating an element will not require to change its top , left , right or bottom CSS properties, so in the same way offsetTop/offseLeft Javascript properties are not changing with a CSS translation. Beside, the position of the element could be also static (and thus no z-index is required) If you use position: relative

Overflow behavior after using CSS3 transform

阅读更多关于 Overflow behavior after using CSS3 transform

问题 Please check the demo I have two div s the first div is used for showing the scroll-bar and the second div is used for the rotation of inner contents of the div . My question is why scroll-bar is showing even if there is no overflow of the inner contents. Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this. HTML <div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">

Keep box-shadow direction consistent while rotating

阅读更多关于 Keep box-shadow direction consistent while rotating

问题 When giving e.g. a <div> a box-shadow as well as rotating it will cause a rotation of the box-shadow direction - which is problematic when the box-shadow should create an illusion of lighting. Example: https://jsfiddle.net/5h7z4swk/ div { width: 50px; height: 50px; margin: 20px; box-shadow: 10px 10px 10px #000; display: inline-block; } #box1 { background-color: #b00; } #box2 { background-color: #0b0; transform: rotate(30deg); } #box3 { background-color: #00b; transform: rotate(60deg); } #box4

Unskewing the ends of an assortment multiple skewed images

阅读更多关于 Unskewing the ends of an assortment multiple skewed images

问题 I asked this question earlier asking how to skew an assortment of images. I was able to get very satisfying results .container { font-size: 0; height: 215px; margin: 30px 50px; text-align: center; color: black; } .box1 { font-size: initial; width: calc(100% / 6); height: 100%; border: 3px solid; box-sizing: border-box; transform: skew(-25deg); position: relative; overflow: hidden; display: inline-block; } .box2 { font-size: initial; width: calc(100% / 6); height: 100%; border: 2.5px solid;

rotate3d shorthand

阅读更多关于 rotate3d shorthand

问题 How to combine rotateX(50deg) rotateY(20deg) rotateZ(15deg) in shorthand rotate3d() ? 回答1: rotateX(50deg) is equivalent to rotate3d(1, 0, 0, 50deg) rotateY(20deg) is equivalent to rotate3d(0, 1, 0, 20deg) rotateZ(15deg) is equivalent to rotate3d(0, 0, 1, 15deg) So... rotateX(50deg) rotateY(20deg) rotateZ(15deg) is equivalent to rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg) For a generic rotate3d(x, y, z, α) , you have the matrix where You now get the matrices for

How can I wrap a container around its css-transformed contents?

阅读更多关于 How can I wrap a container around its css-transformed contents?

问题 When I use scale or rotate , the parent element wraps to the size of the pre-translation dimensions of the element. JSFiddle Example Is there any way to wrap the parent container around the bounding box of the transformed element with CSS, or do I need to use Maths to manually position things? 回答1: Based on this earlier question it sounds like you will need to use some math and javascript to change the wrapper. By using the function in the answer you could then set the wrapper dimensions

CSS transform is not working in Edge

阅读更多关于 CSS transform is not working in Edge

问题 I am stuck at the following problem. On this site that I created, I have a gallery which is located on the bottom of the page. If I hover over the thumbs, they fly around like crazy which is not what I want. It works like a charm on other browsers; only Microsoft Edge is affected. Can someone help me out to get the images to behave as expected? The CSS looks like this: .node-gallery { float: left; width: 150px; height: 150px; position: relative; margin: 0 60px 50px 0; } .node-gallery img {