css-transforms

问题 Live example: https://jsfiddle.net/b8vLg0ny/ It's possible to use the CSS scale and translate functions to zoom into element. Take this example, of 4 boxes in a 2x2 grid. HTML: <div id="container"> <div id="zoom-container"> <div class="box red">A</div> <div class="box blue">B</div> <div class="box green">C</div> <div class="box black">D</div> </div> </div> CSS: * { margin: 0; } body, html { height: 100%; } #container { height: 100%; width: 50%; margin: 0 auto; } #zoom-container { height: 100%

问题 Having a SVG Path: <path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/> I have tried to transform it from CSS instead of declaring the transform attribute from the element tag. This process works fine from webkit and firefox, however when testing on IE9 or 10 nothing happens. <svg> <style> .st8 { -webkit

问题 I'm displaying a element on my site which I rotate with -90deg but if a browser doesn't support the CSS transform the element looks misspositioned and not really good. Now I want to detect with JavaScript or jQuery (it's indifferent if jQ or JS because I use/loaded already jQ on my site) if this rotation via CSS is supported? I know Modernizr but just for that little thing I don't want to include that whole library (and speed down the website speed load). 回答1: Here's a function based on Liam

问题 I am trying to create a web layout with trapezoid shapes like in the image attached. With the addition that each section has a background-image that fills the background with cover or a like result. The first section (dark blue) I have achieved simply using skew and two divs as demonstrated below. However, I can't create the following section, where it skews two ways. I have attempted using clip-path without luck. Then the final section needs to square-off again. HTML <section id="my_section"

问题 I have a rainbow bar that sits at the top of my page: .rainbow-bar { /* Epic rainbow bar */ height:8px; background: black; /* fallback */ background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-size: 200% 200%; animation: moveright 3s ease infinite; animation-direction: alternate; } So I want the bar to loop forever, moving to the right. I'm bad at explaining so heres an image This is the current animation code I have which of course just makes it

问题 Just for fun I'm trying to draw on 3D transformed canvases. I wrote some code and it kind of works const m4 = twgl.m4; [...document.querySelectorAll('canvas')].forEach((canvas) => { const ctx = canvas.getContext('2d'); let count = 0; canvas.addEventListener('mousemove', (e) => { const pos = getElementRelativeMousePosition(e, canvas); ctx.fillStyle = hsl((count++ % 10) / 10, 1, 0.5); ctx.fillRect(pos.x - 1, pos.y - 1, 3, 3); }); }); function getElementRelativeMousePosition(e, elem) { const pos

问题 This is probably the simplest question anyone has ever asked on SO but my mind is drawing a blank this morning. Maybe I need more coffee. Basically I'm trying to add some CSS3 transform effects to an element and for whatever reason Firefox isn't playing ball. If you take a look at this fiddle in Chrome you'll see what I want, then if you look at it in Firefox you'll see that it's not the same... This is the CSS for that particular element; -webkit-transform: rotateY(60deg) scale(0.9); -ms

问题 My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform . In my case I have two div s absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like: <div id="below"></div> <div id="above"><div id="nav"></div></div> The above div has border-radius: 50% and clips the nav div . In CSS it goes like (minimal

问题 The problem is that the transform property's value has multiple part like translate , scale etc. This is a theoretical question about element, let's .loader that has transform:translate(10px, 10px) and in the animation I want to animate the scale property. In this case, the browser will not take the transform:translate(10px, 10px) and will take only the scale . I am looking for a way around this problem. Here is an example to this question. Please, keep attention that I'm not looking for an

问题 I have an element which has been transformed with a matrix3d to give it perspective. It represents the screen of a handheld device. There's a background image showing the handheld device itself, and this is not transformed. The element which holds this is positioned, and the screen element is positioned absolutely within it, at left: 0; top: 0; , and then transformed, with an origin in the top-left of the container. This was the easiest way for me to line it up perfectly with the background