css-transforms

问题 I am new to CSS transform and animation, I was just wondering what is difference between those two. I under -webkit-transform is specific to chrome and -moz-tranform is to Mozilla Firefox. I can't find a difference between -webkit and -ms. 回答1: well -webkit- is for Chrome and safari where as -ms is for Internet Explorer there are also other prefixes like -moz- for Firefox and -o- for Opera here a link that might help: http://peter.sh/experiments/vendor-prefixed-css-property-overview/ 回答2:

问题 I'm working on a masonry type layout where I have a container with a column-count property, and then items with rounded corners that hold images. I want the images to give a little transform: scale on hover, but with this combination of css the rounded borders disappear during the transition. Is there any way around it? .container { column-count: 2; } .item { width: 100%; overflow: hidden; border-radius: 10px; } img { max-width: 100%; max-height: 100%; transition: all 0.2s; } img:hover {

问题 How can I make a diagonal line fill in and fit into a box (just pure css - without any use of background image)? div.diagonal-container { border: 1px solid #000; width:400px; height:400px; margin: 0 auto; } .to-right, .to-left { border-top:1px solid #ff00ff; width:100%; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .to-right { -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg);

问题 Here is my css code: #pic-1 { z-index: 1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); -ms-transform: rotate(-10deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9848077530122081, M12=0.17364817766692991, M21=-0.17364817766692991, M22=0.9848077530122081, SizingMethod='auto expand'); } I want to get the filter matrix M11 value from this class. In this case I tried: console.log(document.getElementById(

问题 @keyframes my-animation { 0% { transform: translate(0, 40%) scale(0); } 10% { transform: scale(1.1); } 20% { transform: scale(1); } 100% { transform: translateY(0%); } } I'm trying to make my element pop then move on the Y axis, but the above fails to work. Where am I going wrong? 回答1: Transform property gets overridden during your animation. So even though the keyframe at 0% says translate by 40% in Y-axis, the second frame at 10% nullifies it. There is a movement between 0% and 10% but that

问题 I am aware that this is possible with three.js but it seems that three.js maxes a mesh sphere and the image gets a bit distorted. I'd also rather just use CSS if possible. Is this something that can be done with CSS transforms? Ideally I'd like to animate it going from a flat image to a sphere so something that can easily be animated with CSS transitions would be great. 回答1: I found a nice example of how to do this with CSS on codepen: http://codepen.io/donovanh/pen/GBIiv. It doesn't actually

问题 After translating an element in CSS it's transformation origin stays in it's original location. In this particular case I want the transformation origin to stay centered relative to the element during all transforms. I want the origin to sort of follow the element being transformed. I know about the transform-origin property but that seems to require me to manually move the origin with the element each time...And even if I could do that in JavaScript, it seems very math heavy and not

问题 My problem is that I haven't figure out how to align the spaces responsively. I've tried using vw/vh's and %s but both break consistency on different view sizes. Can anyone recommend a straight-forward way to lock down this board? I didn't want to use multiple canvas bc of the cpu drain of 50+ spaces and don't want to use an image map because that's not responsive. Hi guys and gals, I'm trying to port a board game into HTML via angular 1.x. I have an object with each board space, and have

问题 I asked previously about the proper function for perspective (to compute and compose a matrix), now I'm facing an older problem and I wasn't expecting this to be so much of an issue still. Basically 360deg / 720deg is just zero and I don't know how to hack the following function to fix that. CSSMatrix.Rotate = function(rx, ry, rz){ rx *= Math.PI / 180; ry *= Math.PI / 180; rz *= Math.PI / 180; // minus sin() because of right-handed system var cosx = Math.cos(rx), sinx = - Math.sin(rx); var

问题 I'm using -webkit-transform: rotate(40 deg) and it seems that the rotated element is hiding parts of elements which are on top ( not children ) of the rotated one. I created a jsFiddle here with the code, since it will be easier to demonstrate. Probably this is because the rotated element hides parts of other elements, but I don't want this effect. How can I fix that? I used z-index but it doesn't help! 回答1: You're doing a 3D transform. You have 'rotateY' in the fiddle not 'rotate'. So you're