css-transforms | 易学教程

CSS transform: scale does not change DOM size?

阅读更多关于 CSS transform: scale does not change DOM size?

Container's DOM width after transform is the same as before transform? Why? var theScale = aNumber; var containerWidth = theContainer.width(); alert(containerWidth); // and the other prefixes, as well theContainer.css("-webkit-transform", "scale(" + theScale + ")"); containerWidth = theContainer.width(); alert(containerWidth); // the same value ??? Transforms don't affect the layout — or more precisely the box model — of an element. They are purely cosmetic. From the spec : Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also

Re-sizing a cube

阅读更多关于 Re-sizing a cube

I have a set of codes from the cube created using CSS. However, how do I resize this into a bigger cube (for example, 200px)? I have tried but everytime I try doing it, it goes out of position.. .mainDiv { position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top: 100px; } .square { width: 100px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: skew(180deg, 210deg); position: absolute; top: 43px; } .square2 { width: 100px; height: 100px; background: #c52329; border: solid 2px #FFF; transform: skew(180deg, 150deg); position: absolute; left: 102px; top:

transform-origin not working in Firefox even properties in percentage value

阅读更多关于 transform-origin not working in Firefox even properties in percentage value

CSS3 transform-origin not working in firefox browser. I am trying to run transform: rotate(360deg); in @keyframes for <g class="tyre"> as child of <svg class='truck'> . In the result the truck wheel rotation works fine for all other browser except chrome There are similar questions in Stack Overflow unfortunately none of them are related with the question. .tyre{ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; transform: rotate(0); -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { from {

CSS Transforms in IE7

阅读更多关于 CSS Transforms in IE7

Hi am using css transform in scale property my code is like this -webkit-transform: scale(1.05); /* Safari and Chrome */ -moz-transform: scale(1.05); /* Firefox */ -o-transform: scale(1.05); /* Opera */ -ms-transform: scale(1.05); /* IE 9 */ transform: scale(1.05); Here not supported in ie7 letyou known the answer please reply me ASAP. I'm not sure I understand your question. CSS transforms are not supported in IE8 or older, where you have to have to use an IE matrix filter in order to achieve the same effect (scale or rotate). Like this (code for IE8 and older, check it live with IE8 or older

Rotating CSS cube on fixed axes

阅读更多关于 Rotating CSS cube on fixed axes

I have a cube constructed using CSS. It's made of 6 faces and each face is transformed to form one face of the cube, and all the 6 faces are under one <div> with the class .cube . Any rotation I do to the cube is done on this enclosing cube class. I want the cube to rotate based on mouse drag input. So far it kinda works. I just translate x and y mouse movement into cube rotation about the x and y axes. But there's one major problem with this. I perform the rotation as a simple transform: rotateX(xdeg) rotateY(ydeg) CSS property. The issue with this is that the y axis of rotation is getting

why -webkit-transform: translate3d(0, 0, 0) messes up with fixed childs

阅读更多关于 why -webkit-transform: translate3d(0, 0, 0) messes up with fixed childs

问题 I've been trying for the last few hours to figure out how come a child element was positioning against its parent and not the screenport even though it's positioned as 'fixed'. Very luckily, I stumbled across the mentioning that -webkit-transform: translate3d(0, 0, 0) on the parent can make things go awry. I'm using bootstrap framework and so they indeed put this property on the .navbar-fixed-top class which one of parent elements had. Once I removed it the child started to position agains

Shape resembling a compass pointer or inner part of a Safari logo

阅读更多关于 Shape resembling a compass pointer or inner part of a Safari logo

问题 I am trying to make the below shape using only CSS. I know that achieving this shape using an image or SVG would be a lot easier but I am trying to achieve it with CSS for a proof of concept. The below is the code that I have tried so far. It creates a diamond shape by using transform: rotate(45deg) but the diagonals are of the same length whereas the shape that I need has one very long diagonal and another very short. .separator{ background: #555; top: 40px; padding-top: 0px; margin: 0px

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> </body> </html> transform is not applicable to inline elements such as <a> . You could display the

What is the math behind -webkit-perspective?

阅读更多关于 What is the math behind -webkit-perspective?

"Simple" question that I can't find the answer to -- What does -webkit-perspective actually do mathematically? (I know the effect it has, it basically acts like a focal-length control) e.g. what does -webkit-perspective: 500 mean?!? I need to find the on-screen location of something that's been moved using, among other things, -webkit-perspective The CSS 3D Transforms Module working draft gives the following explanation: perspective(<number>) specifies a perspective projection matrix. This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose

Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg)

阅读更多关于 Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg)

I just want to skew the parent and skew it back on the child. Example : HTML <div class="parent">  <div class="child">Hello</div>  </div> Example : CSS .parent { transform: skew(-10deg); } .child { transform: skew(10deg); } Text inside seems ok with Firefox, Safari. But not Chrome and Opera its a bit blurry I have to use -webkit-backface-visibility: hidden; for reduce box pixelated in Chrome Firefox : Chrome : Firefox vs Chrome : or zoomed by Photoshop Live example : http://jsfiddle.net/1tpj1kka/ Any idea ? NOTE !!! : web-tiki's answer is an