css-transforms

问题 Have a very small snippet of an asteroids-like game I'm working on using only the DOM without Canvas. I have the "ship" moving pretty smoothly when arrow keys are pressed but how would I go about making the ship accelerate ( in speed and rotation ) when an arrow key is held down for a longer length of time? window.onkeyup = function( e ) { var kc = e.keyCode; e.preventDefault(); if ( kc === 37 ) Keys.left = false; else if ( kc === 38 ) Keys.up = false; else if ( kc === 39 ) Keys.right = false

问题 I would like to build a animated spinner with CSS3. It should behave like this : After the last state it should start again like in the first state. I managed to create circles using the technique explained here : stackoverflow question Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either. 回答1: CSS3 spinner This

问题 I am trying to scale a div, but keep the inside element at the same position and the same size . To do that, I use transform: scale(value) on wrapper and transform: scale(1/value) on the inside div. The problem is, that the inside div shifts when I change scale. That only happens if width/height of wrapper is odd or not whole. It does not happen for even widths/height of the wrapper. My goal is to have many child elements of wrapper that scale alongside wrapper, but only one that does not.

问题 I want to create a bootstrap flip card by using CSS3 transform. I did started from this working and basic example However I wanted to modify it to have a fixed height card and some minor enhancement. In particular I needed to have the card flip when the user click on an icon I have created on the top right corner. I have modified the code as you can see here. The problem is that the card does not flip back to front after having flipped correctly to the back side. Can anybody suggest any

问题 I want to create a bootstrap flip card by using CSS3 transform. I did started from this working and basic example However I wanted to modify it to have a fixed height card and some minor enhancement. In particular I needed to have the card flip when the user click on an icon I have created on the top right corner. I have modified the code as you can see here. The problem is that the card does not flip back to front after having flipped correctly to the back side. Can anybody suggest any

问题 I want to be able to skew an element in the way the image displays below. I have been playing around with it, but dont seem to be able to get close to replicating that shape. My css code is transform:skew(30deg,30deg); Is transform even the right way to do this? Please let me know the best, most browser compatible, solution. 回答1: You can apply some rotate transform around the X axis and apply an appropriate pespective before: div { width:300px; height:200px; background:url(http://placekitten

问题 I want to be able to skew an element in the way the image displays below. I have been playing around with it, but dont seem to be able to get close to replicating that shape. My css code is transform:skew(30deg,30deg); Is transform even the right way to do this? Please let me know the best, most browser compatible, solution. 回答1: You can apply some rotate transform around the X axis and apply an appropriate pespective before: div { width:300px; height:200px; background:url(http://placekitten

问题 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

问题 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

问题 When I click on the scene, then box falls down. When I click again, box stands up. Animation is smooth, but when I click many times in different positions, then sometimes animation skips frames. I have this bug on OS X in Google Chrome. Tested in Opera — everything is ok, there is no bug. http://jsfiddle.net/nw78myhn/1/ Does anybody know how to fix the problem? <div class="scene"> <div class="box"></div> </div> .scene { width: 500px; height: 500px; position: absolute; background: #efefef; }