css-transforms

问题 When adding a CSS transformation like transform:translate(0px, -45px) to a table row, Internet Explorer (tested 10 and 11) and Microsoft Edge do not correctly display the transformation. Using some simple code as an example: <table style="width:500px;"> <tbody> <tr style="height: 30px; background-color:red; color:white;"> <td>1</td> </tr> <tr style="height: 30px; background-color:blue; color:white;"> <td>2</td> </tr> <tr style="height: 30px; background-color:yellow; color:black; transform

问题 I want to set several transform options for my html object but with different duration and delay. If i try to use something like that: -webkit-transition: -webkit-transform, opacity; -webkit-transform: rotate(180deg) scale(2); -webkit-transition-duration: 2000ms, 6000ms; -webkit-transition-delay: 0ms, 6000ms; Then i will have different time function for transform and opacity but can i set different options for rotate and scale, e.g. rotate for 10s and scale 20s? 回答1: Probably not directly,

问题 I'm facing a problem, I have a div with an absolute position, and I'm trying to rotate it 360 degrees with an endless looping. But if I use the transform: translate (-50%,-50%) to fully center this div, it won't work properly. HTML <div class="randomName"></div> CSS .randomName { background-color: orange; width: 1500px; height: 1500px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: orbita 2s linear infinite; -webkit-animation: orbita 2s linear infinite;

问题 I've got a cube element being rotated and translated in a 3d space. I want to find out just the rotateY portion of this transform at a given time. Is this possible? I have: var cube = document.getElementById("cube"); var transform = getComputedStyle(cube).webkitTransform; //the value of transform is: // matrix3d(-1, 0, 0.00000000000000012246467991473532, 0, // 0, 1, 0, 0, // -0.00000000000000012246467991473532, 0, -1, 0, // 0, 0, 0, 1) Help? :-) 回答1: If your object is only being rotated about

问题 I have to use the transform matrix to animate transform: scale of an element. I want to scale from 0 to 1. If I use the following code it works properly: .container { width: 200px; height: 100px; background: yellow; transform: scale(0); transition: transform 1s; } .container.open { transform: scale(1); } https://jsfiddle.net/w4kuth78/1/ If I use the matrix itself, it is not working. .container { width: 200px; height: 100px; background: yellow; transform: matrix(0, 0, 0, 0, 0, 0); transition:

问题 It appears both IE 10 and Firefox snaps elements to whole pixels when animating their position using translate 2d transform in a css keyframe animation. Chrome and Safari does not, which looks a lot better when animating subtle movements. The animation is done the following way: @keyframes bobbingAnim { 0% { transform: translate(0px, 0px); animation-timing-function:ease-in-out } 50% { transform: translate(0px, 12px); animation-timing-function:ease-in-out } 100% { transform: translate(0px, 0px

问题 Here I created jsFiddle which kind of replicates my problem After animation (clicking on MOVE twice), fixed column comes back with wrong position. is it possible to animate my this without using left or right for fixed positioned element? 回答1: Updated jsfiddle http://jsfiddle.net/z8fBD/7/ Trick is to add reset translate on #body #body { position:absolute; left: 0; top:0; width: 200px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms

问题 I recreated an issue that I am encountering in a template. There is a nav that has position: relative; . Inside the nav there is a div with two lists nested. One of the lists is position absolutely to stick to the bottom of the nav . The problem occurs when the div has a transformation applied to it. When the div in between the absolutely and relatively positioned elements get's a transform property, the absolute list positions itself relatively to the div instead of the nav . MDN Docs state

问题 I'm currently developing a tiny "draggable for mobile widget", basically it implements only part of the interface of the jQUery UI Draggable widget (The part I needed for my project). I Know I can simulate the mouse events and make the jQuery UI Draggable to work properly on the mobile/tablet platforms, but the main issue with that approach is that it does not feel smooth enough, and since the CSS3 Transforms are hardware accelerated, using translate3d instead of changing the top, left

问题 Possibly more math than CSS, but I'm trying to determine a method for adjusting the positioning of a div after a CSS skewY transform has been applied to it. In the snippet below, the div with the blue border has a 3.5deg skewY applied, and I'd like to know if there is a mathematical way to know how much top to apply to the blue div so that the top right corner is always perfectly aligned to the top right corner of the div with the red border, regardless of the width of the two divs. I have