css-transforms

问题 I would like to create a button that toggles back and forth between two states on click. Currently the first click transitions the button successfully to the second state, but I cannot get the button to transition back to the original state on the second click. Here is my code: $('.popup_contact').on('click', function() { $(this).toggleClass('active'); }); .popup_contact { display: inline-block; min-height: 50px; height: auto !important; width: 100px; padding-top: 5px; text-align: center;

问题 Goal: Wrap a panoramic Image/Video around a Cylinder and control a "camera" on the inside to look around a pano. First thing's first, I cannot find any example of an image, let alone a video, wrapped around a cylinder. Anyone know how to do this? I think I should be fine with the interactive aspects of controlling the viewport with the mouse or arrow keys, but I have no clue how to begin with this cylinder stuff, as I'm kinda a noob with CSS transformations and 3d webkit coding… Love you long

问题 Goal: Wrap a panoramic Image/Video around a Cylinder and control a "camera" on the inside to look around a pano. First thing's first, I cannot find any example of an image, let alone a video, wrapped around a cylinder. Anyone know how to do this? I think I should be fine with the interactive aspects of controlling the viewport with the mouse or arrow keys, but I have no clue how to begin with this cylinder stuff, as I'm kinda a noob with CSS transformations and 3d webkit coding… Love you long

问题 I am using CSS to slightly rotate Text. The text is black on a white background, but because of the rotation part of the background has some little transparent lines going through it. This image will show it more clearly: body { background: red; } .featured-grid-b .item-heading { /*Black text on white background*/ box-shadow: 0 0 0 5px #fff; padding: 0; background: #fff; line-height: 2 !important; display: inline; color: #000; text-shadow: none; } .caption h3 { /*Rotate Text*/ transform:

问题 I have this situation and I am interested to know what can I do, in order to have a smooth menu sliding movement, all the way to the right (at menu-open) and to the left (at menu-close) without that jiggling interrupted-sticky effect at the beginning and the end of the movement that sometimes is covering the body site wrapper; I've tried to apply a smooth transition but the issue is still there: #responsive-menu-pro-button, #responsive-menu-pro-container, .edge-wrapper { -ms-transition-timing

问题 I have an inline SVG which is being animated, however when you zoom in or out in the browser the object which is being rotated no longer rotates at its centre point. It works fine in Chrome. http://codepen.io/chrismorrison/pen/rmLXWw #rays { animation: spin 6s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } @keyframes spin { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transform-origin: center center; transform

问题 I have a simple "pulsating" effect on the play-button (which is an anchor tag), using CSS3 and keyframes. While it works flawlessly in Chrome and Safari, it doesn't seem to be working in Firefox. Does anyone have an idea on why? li > a { -webkit-animation: pulsate 3s ease-in-out; -moz-animation: pulsate 3s ease-in-out; -o-animation: pulsate 3s ease-in-out; animation: pulsate 3s ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation

问题 I'm using this script that claims to implement matrix3d operation as described in the spec, however the script is missing matrix perspective operations, so I "cooked" something I'm not sure is either accurate or correct. // the perspective matrix to multiply with CSSMatrix.Perspective = function(x, y, z){ var m = new CSSMatrix(); m.m13 = x; m.m23 = y; m.m33 = z; return m; }; and the method to use this matrix // myMatrix.perspective(x,y,z); to apply a perspective matrix CSSMatrix.prototype

问题 I'm using -webkit-transform: skew(-15deg, 0deg); to skew a div, and then -webkit-transform: skew(15deg, 0deg); to deskew the text-containing child. The skewing looks ugly and pixlated in google chrome, so I use -webkit-backface-visibility: hidden; to make it look OK. Now the container is skewed very nice and the inside text is "unskewed" but the text itself is blurry and ugly! (problem only exists only in chrome who uses -webkit) Demo Any ideas how to make the text clear again? HTML <div

问题 I have an <input type="range"> and want to rotate the thumb - but only the thumb on input. My problem is: When i try to rotate it, it rotates the whole slider. Can someone help me? function slide(event){ event.target.style.webkitTransform = 'rotate(20deg)'; } .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; border-radius: 20px; }