css-transforms

问题 From an image I have to show it as a painting and also put a frame on it (all this with a 3D perspective). This is how the image should look, like a painting: This is how it should look with the frame: Here is the code I have, so far only the part that looks like a picture. .sh { --valorshadow: -20px 30px 10px rgba(0, 0, 0, 0.3); filter: drop-shadow(var(--valorshadow)); } .box { --x: 10px; --y: 30px; clip-path: polygon( 0 calc(var(--x) + var(--y)), var(--y) var(--y), calc(100% - var(--y)) var

问题 I am trying to achieve a classy zoom in effect on a div's background image with background-size:cover using transform:scale. The problem I am facing is that the scale seems to enlarge the div as the background-image zooms in. Is there a way to only apply the effect to the background image? Or am I doing something wrong? .despre-noi-image { width: 40%; height: 500px; background: url('https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2017/04/18/16/wine

问题 I am trying to achieve a classy zoom in effect on a div's background image with background-size:cover using transform:scale. The problem I am facing is that the scale seems to enlarge the div as the background-image zooms in. Is there a way to only apply the effect to the background image? Or am I doing something wrong? .despre-noi-image { width: 40%; height: 500px; background: url('https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2017/04/18/16/wine

问题 I have a three-line animated menu that switches to a cross when you clicked on it. First you see the three lines go to one, and then switch to a cross. But I want skip the step from three lines to one. How can I do that? Here's the fiddle http://jsfiddle.net/adyocsm9/ $(document).ready(function() { $(document).on('click', ".lines-button", function() { $('.lines-button').addClass('close'); }); $(document).on('click', ".lines-button.close", function() { $('.lines-button').removeClass('close');

问题 I have a code that given an image does the effect of perspective in 3D. This is the result: This is the code: .thumb { margin: 100px; perspective: 1000px; width: 1920px; height: 1200px; } .thumb a { --bg-pseudo: rotateY(120deg); /*Modificar transform */ --bg-pseudo2: --bg-pseudo2', '-5px -15px 45px 130px rgba(0, 0, 0, 0.3); /*modificar box-shadow */ display: block; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('https://www.wallpaperk

问题 I have a code that given an image does the effect of perspective in 3D. This is the result: This is the code: .thumb { margin: 100px; perspective: 1000px; width: 1920px; height: 1200px; } .thumb a { --bg-pseudo: rotateY(120deg); /*Modificar transform */ --bg-pseudo2: --bg-pseudo2', '-5px -15px 45px 130px rgba(0, 0, 0, 0.3); /*modificar box-shadow */ display: block; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('https://www.wallpaperk

问题 Example code here: http://jsfiddle.net/gat5S/1/ I want to create a "card" that can be flipped via CSS rotateY . The rotation is based on David Walsh's CSS Flip Animation and in principle works well. However, in my example, I have an :after pseudo-element for each side of the card that I use to create a paper-like shadow effect. This pseudo-element is put behind the card via negative z-index:-1; . This works for the "front" card but not after rotation and not for the "back" card. The jsFiddle

问题 I don't know why it don't work. I am using jQuery 2.1.0 I have this code: $("a.shownav img").rotate(180); How can I make it work without using a plugin? 回答1: for using .rotate() , you need to add jqueryrotate plugin. This can be also achieved using pure jQuery and CSS. Try this: $("a.shownav img").css({ "-webkit-transform": "rotate(180deg)", "-moz-transform": "rotate(180deg)", "transform": "rotate(180deg)" /* For modern browsers(CSS3) */ }); 回答2: Use .css() in jquery $("a.shownav img").css(

问题 I was reading about the CSS rotate3d() property to rotate an element. I thought that the first three parameters in the function are multipliers and the fourth one is the degree magnitude. The value of multipliers has to be between 0 and 1. This means that rotate3d(1, 0, 0, 90deg) will only result in rotateX(90deg). To get more range of rotations I changed it to rotate3d(0.25, 0, 0, 360deg) but it produces entirely different result. I also noticed that transform: rotateX(45deg) rotateY(45deg);

问题 I have a card flip style animation that flips a textarea 180 degrees. The only issue I'm having is that the first time the flip is executed, just after passing 90 degrees, the element disappears, then the element behind appears on the completion of the 180 degree rotation. Here's the example with the code: http://jsfiddle.net/elninja/yhprm6nj/ CSS .flip { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-perspective: 800; height: 100px; width: 250px; -webkit