css-transforms | 易学教程

use multiple css filters at the same time?

阅读更多关于 use multiple css filters at the same time?

问题 I am experimenting with css filters. And I would like use the blur and grayscale at the same time, but I can't seem to use both simultaneously on the same image? See fiddle here... http://jsfiddle.net/joshmoto/fw0m9fzu/1/ .blur { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .grayscale { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); } .blur

How to get the position of element transformed with css rotate

阅读更多关于 How to get the position of element transformed with css rotate

问题 I'm having a problem with getting the position of a div after rotate filter is applied to it. I have the position of one end, its height, and the angle by which it is rotated, but after checking what this filter actually does on MDN ("[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]") I still don't know how to crack it. Example : The div I'm interested in is the dashed line. Its styling at that moment was : left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1

How to recreate perspective-origin effect by transforming child elements?

阅读更多关于 How to recreate perspective-origin effect by transforming child elements?

问题 So after struggeling with IE glitches and incompatibilities, I've finally got my correctly sized cuboid working ( update: here's an example of it). Animating requires to animate all sides separately instead of a single parent element, however this seems to be the only way to get it working in IE. Using a single cuboid works fine, multiple cuboids however are problematic, since perspective is applied to the single transformed elements (which is necessary in order to work in IE) they do all

CSS3 3D Transform doesn't work on IE11

阅读更多关于 CSS3 3D Transform doesn't work on IE11

问题 I'm trying to build a cube with CSS3 3D Transform.. For this example I have only 2 faces : <section id="header-cube-container"> <div id="header-cube"> <figure></figure> <figure></figure> </div> </section> With every other browser I get a good result, but it's weird with IE 11. I have a good 3D translate and rotate on the green face (1), but the red face (2) perpendicular doesn't display in 3D. It's only the projection of the red face on the green face. You can see the result on this fiddle.

CSS 3d transform doesn't work if perspective is set in the end of property

阅读更多关于 CSS 3d transform doesn't work if perspective is set in the end of property

问题 I found transform property depends on perspective() position why is this happening? any other rules/limitations for transform ? though it feels strange to me, this not seems to be a bug as I am able to reproduce this in Chrome/FF box:nth-child(1):hover { transform: perspective(1000px) translate3d(0, 0, -100px); } box:nth-child(2):hover { transform: translate3d(0, 0, 100px) perspective(1000px); } box { padding: 20px; display: inline-flex; align-items: center; justify-content: center; font

Add a transform value to the current transforms that are already on the element?

阅读更多关于 Add a transform value to the current transforms that are already on the element?

问题 Let's say I have a div that had translateX and translateY values added dynamically. <div class="object child0" style="-webkit-transform: translateX(873.5px) translateY(256px); width: 50px; height: 50px;"> I want to add rotateY(20deg) to the current transforms, but applying it via element.style.webkitTransform = "rotateX(20deg)" loses the other values. Is there a way to add the rotateY without losing the translateX and translateY transforms? 回答1: You could use the += operator to append the

Transforms are added…endlessly

阅读更多关于 Transforms are added…endlessly

问题 I'm creating a simple asteroids-like game in CSS and JS using the DOM over canvas for...experimentation purposes. My code is pretty small in this example to make it easy to see what's going on below. The ultimate goal: Let arrow keys smoothly rotate and translate the spaceship around the window without creating an infinite amount of transforms. I think I'm 90% there : Use the arrow keys to control the snippet below. 'use strict'; function defineDistances() { var distance = {}; distance.up =

Prevent children from inheriting rotate transformation in CSS

阅读更多关于 Prevent children from inheriting rotate transformation in CSS

问题 I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation? Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution. I tried the "transform: none" suggestion from this question prevent children from inheriting transformation css3, yet it simply doesn't work -

Is it possible to style a div to be trapezoidal?

阅读更多关于 Is it possible to style a div to be trapezoidal?

问题 I know it's possible to skew but I don't see a way to skew each corner with a particular degree. Here's the project I'm working on: http://map.ucf.edu/ Looking specifically at the tabs within the menu. Right now I'm using images, I would like to change that for capable browsers. I know it's possible to create a CSS trapazoid, but that is using borders without content. The end result also needs a bit of rounded corners. edit: Starting with Zoltan Toth's solution I was able to achieve this:

Flip a 3D card with CSS

阅读更多关于 Flip a 3D card with CSS

I'm trying to make a 3D card flipping effect with CSS like this. The difference is that I want to use only CSS to implement it. Here is the code I tried: /*** LESS: ***/ .card-container { position: relative; height: 12rem; width: 9rem; perspective: 30rem; .card { position: absolute; width: 100%; height: 100%; div { position: absolute; height: 100%; width: 100%; } .front { background-color: #66ccff; } .back { background-color: #dd8800; backface-visibility: hidden; transition: transform 1s; &:hover { transform: rotateY(180deg); } } } } HTML: <div class="card-container"> <div class="card"> <div