css-transforms

问题 please is there a way how to combine more CSS3 transforms over the time? For example when I set this $bgWrapper.css({ '-webkit-transform' : ' scale3d(' + currScale + ', '+ currScale +', 1)' }); And then in few moments this $bgWrapper.css({ '-webkit-transform' : 'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) ' }); I get a problem. First transform is overriden with the second one, but thats what I definitely don't want to happen. So I observed I can

问题 I'm very confused. Why can't I use scale and rotate at the same time? I've tried this, but it does not work: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } I tried jQuery, but does not work neither: <style> .zoom{ -webkit-transform:scale(2,2); margin-left:20%; margin-top:10%; } </style> <script> $(document).ready(function(){ $("img").dblclick(function(){ $(this).addClass("zoom"); $(this).contextmenu(function(){ $(this).css("

问题 Consider the following fiddle p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: transform 1s ease-in; -moz-transition: transform 1s ease-in; -o-transition: transform 1s ease-in; transition: transform 1s ease-in; } a:hover + p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform:

问题 The transform property lets you rotate or flip, but how can you do both at the same time? Say I want to rotate an element 90 degrees and flip it horizontally? Both are done with the same property, so the latter overwrites the former. Here's an example fiddle for convenience: http://jsfiddle.net/DtNh6/ transform: rotate(90deg); transform: scaleX(-1); 回答1: I fiddled with jsfiddle, and this worked: $('#photo').css('transform', 'rotate(90deg) scaleX(-1)'); To relate it to your question, the

问题 tl;dr: I would like to create an actual 3d sphere with CSS - not just an illusion Note: some of the snippet examples are not responsive. Please use full screen. With pure CSS you can create and animate a 3d cube like so: #cube-wrapper { position: absolute; left: 50%; top: 50%; perspective: 1500px; } .cube { position: relative; transform-style: preserve-3d; animation-name: rotate; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes

问题 What is the best way to have an object scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off

问题 I just want to know how to use the jquery .css() function to not overwrite, but to add additional values to css properties. For instance, I have an element that is currently has the css transform:translate(-50%, -50%) on it. And I want to use the jQuery .css() function to ADD transform: rotate(90deg) , but when I use it, it overwrites it. Check out this fiddle if my description is confusing. http://jsfiddle.net/justinbchristensen/mvhwbjLo/1/ You will see in the Fiddle that when you first

问题 I am trying to study the transform origin property and how exactly this property works. I have made a small demo HERE . HTML: <div class="section-title"> <span data-hover="Product Range">Product Range</span> </div> CSS : .section-title { text-align: center; margin: 50px 0px; color: #FFF; text-transform: uppercase; perspective: 1000px; } .section-title span { font-size: 2em; position: relative; display: inline-block; padding: 0px 14px; background: #2195DE none repeat scroll 0% 0%; transition:

问题 In this example I want to rotate the hammer from its bottom so is there a way to know exactly the right coordinates of a specific point on the element or should I randomly try different points? svg { width: 50%; } .hammer-icon { transform-origin: 200px 50px; transition: transform .3s ease-out; } .hammer:hover .hammer-icon { transform: rotate(45deg); } <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200"> <g class="hammer"> <circle class="hammer-bg" fill="#FFD466" cx="200" cy="50" r

问题 Reference this link: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective Perspective must be set to move a child element along the z-axis. The link above show examples of different perspective values, all of which set the z-axis in a diagonal direction. If I'm looking directly at the face of a 3D cube and I move it backwards (along the z-axis) it would look like it's getting smaller (moving away from me), not moving diagonally. So why does CSS have a diagonal z-axis by default? Is