css-transforms

问题 I've got this loader, rendering fine in everything, but Safari: .pageLoader { min-height: 100vh; min-width: 100vw; background-color: white; z-index: 2; position: fixed; opacity: .9; top: 0; left: 0; transition: opacity .6s linear; display: flex; justify-content: center; align-items: center; } .pageSpinner { border-radius: 5%; width: 80px; height: 80px; background-color: #f50; animation: a 1.5s infinite cubic-bezier(.4,0,.2,1); } @keyframes a { 0% { transform: perspective(300px) rotateX(0deg)

问题 I have a small issue, I need to rotate 2 spans and create a perfect 'X'. I've created a JSfiddle for this. Can you guys help me? I can't seem to get my head around how much should i transform origin... HTML <div class="toggle-btn"> <span></span> <span></span> </div> SASS .toggle-btn { width: 38px; height: 19px; cursor: pointer; position: relative; margin-top: 18px; text-align: center; &:after { content: ''; display: block; clear: both; } span { height: 2px; margin: 5px 0px; background: #333;

问题 I made this http://codepen.io/adamchenwei/pen/dOvJNX and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate and move through the whole width of the dom. However, I don't really want to fix the distance inside the css keyframe because I need to detect that distance dynamically, since my div that got animated ideally will change the width dynamically as well since that is not going always be 100% or any specific px fixed. Is there way I

问题 Follow up on this topic When I apply css transform to parent element, child element is not fixed anymore. http://jsfiddle.net/z8fBD/7/ have tried using only one direction transform but no success. when you remove transform: translate(0%,0px); everything works just fine, but as you will understand from previous topic, I need this for my animation 回答1: Do you mean the move 'button' should stay put? If so, you need to apply the transform to the container element since the body (you should

问题 I'm looking for a simple way to take an object and transform its rotateY property without it animating to its pre-set transition. This will help me complete this slide show (ONLY VIEW IN CHROME OR SAFARI (WEBKIT)) Here's a breakdown example of the effect: CSS - Transition is set to 5s Phase1 Element1 - rotateY:0; Element2 - rotateY:-180; User - clicks button Phase2 Element1 - rotateY:180; Element2 - rotateY:0; Phase3 Element1 - rotateY:-180; Element2 - rotateY:0; User - clicks button Phase4

问题 I can't work out how to rotate an element so that it sits underneath another one. The image below should illustrate the intended result. Here is what I have tried so far: .div1 { height: 120px; width: 120px; float: left; margin: 20px; border: solid 1px #000; overflow: hidden; } .div1 button { width: 48px; height: 48px; border: 0; margin: 0; padding: 0; } .div2 { background-color: #999; height: 48px; line-height: 48px; box-sizing: border-box; } .originFromLeft .div2 { transform: rotate(90deg);

问题 This CSS "animation" in essence consist of several transitions and transforms on span:nth-children which follow each other sequentially using transition delays. It works fine one way, but what is the best way to reverse the animation? Since it is a sequence the solution should reverse the entire sequence. See fiddle for example: http://jsfiddle.net/musicformellons/6nb0wy68/ #Pqb-icon { background: white; width: 170px; height: 100px; border-radius: 5px; position: relative; overflow: hidden;

问题 I am making drop-caps for the first letter of a paragraph using transform: scale on the pseudo element :first-letter . It works great in Chrome but not in Firefox, although transform: scale and :first-letter both work in Firefox for themselves. HTML <p>Lorem ipsum dolar sit amet</p> CSS p:first-letter { float: left; margin-left: -36px; margin-top: 10px; font-size: 53px; transform: scale(1,2); -ms-transform: scale(1,2); -webkit-transform: scale(1,2); -moz-transform: scale(1,2); } Here is a

问题 I have two images (objects) set side by side in the middle of the page and I want them to move toward each other as if they are going to collide and stop as they are placed beside each one. So, for the object at the right side I have written the following code, thinking that the object should move from left to right, but the result is far from what I expect. Is it possible to do it by transition? what I want is that one of the objects start moving from left side and the other start moving

问题 I'm trying to get a pure CSS parallax effect working without having a fixed background height. This has been described in a few places, but they have the common constraint that the background layer must have a fixed, known height. I would like to get the effect working without having a fixed, known height for the background due to some dynamic content. My minimal example is here: https://jsfiddle.net/yf8oyben/ #container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; perspective: