css-transforms

问题 I have created a shape which represents a page with a shadow that gets bigger towards the bottom. body { background: #dddddd; } div { background: white; margin: 40px auto; height: 300px; width: 300px; position: relative; padding: 10px; } div:before, div:after { height: 96%; z-index: -10; position: absolute; content: ""; left: 8px; top: 2%; width: 30%; max-width: 300px; background: transparent; box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5); transform: rotate(1.5deg); } div:after { transform:

问题 I'm trying to create a basic portal with tabs on the left, rather than on top. Ideally, I would like to accomplish this without any javascript; with HTML5 & CSS3 only. I've been playing with the following code for horizontal tabs: http://jsfiddle.net/Juggler/9Ue9j/2/ <div id="page-wrap"> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Tab One</label> <div class="content"> <p>Stuff for Tab One</p> </div> </div> <div class="tab"

问题 Just a quick question to clear up some confusion that I have regarding units on CSS perspective . On the CSS Transforms spec it references it with px e.g. perspective: 1000px; but I have used and in many other places others have used it without px e.g. perspective: 1000; such as on W3Schools. Is either way more preferred? Does it matter? Just want to clear this up, thanks. 回答1: Just because it's accepted by (some) browsers doesn't mean it's correct. Specifying a unit of measurement is

问题 I'm having problems with mozilla moz-transform scale property. I'm looking for a replacement of the zoom property, which works fine in everything except firefox. When I want to shrink the div, its "content" does shrink, but the size of the container stays the same, leaving a big gap around other content. Is there any way I can force the container size to decrease as well? To clarify I put a simple example here. Open it in chrome and firefox, you will see the difference. 回答1: The only solution

问题 I've recently been looking into improving the animations on my website - more specifically of the navigation dropdown on mobile devices. In this connection I stumbled upon the following case, which I'm hoping to get some more in-depth knowledge about. The case is that when transitioning/animating transform: translate3d() it seems that the browser requires more calculations when it's applied using % rather than px . E.g. in my tests it seems that transitioning from transform: translate3d(0,

问题 This question already has answers here : How to apply multiple transforms in CSS? (9 answers) Closed 3 years ago . I'm trying out the css animation using @keyframes, however the css Transform rotate and translate properties aren't working together. Please advise on what has gone wrong here. Thanks!! You can check the code on codepen: http://codepen.io/anon/pen/XdzwZB following is my @keyframes code: @keyframes slideIn { 0%, 100% { transform: translate(10px); transform: rotate(0deg); color:

问题 I know about the box-shadow property in CSS, but this produces a shadow that looks like being projected on a wall right behind the element. I need to create a shadow that looks like the element is standing on the ground like this: This is what I have so far: div { display: inline-block; height: 150px; width: 150px; background: url(//placehold.it/150x150); margin-left: 20px; box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75); } <div></div> <div></div> 回答1: You can achieve this without using the box

问题 I have been playing with animated CSS3 Media Queries, yes I know their practical use is questionable but it is fun. Anyways, I can get boxes/divs/selectors to transition/expand/contract etc on browser resize but I am having problems with transforms. What I am trying to do is make a div flip or rotate at certain resolutions. Think of it as an iPad changing from landscape to portrait and a div flipping when this happens. Is this actually possible and if so what am I missing/doing wrong? 回答1: Ok

问题 I'm using Chrome 12 in a Linux 64bit box, but I can't get any of the samples bellow to work: http://www.satine.org/research/webkit/snowleopard/snowstack.html http://www.marcofolio.net/css/3d_animation_using_pure_css3.html http://kevchapman.co.uk/css/webkit-css-perspective-demo/ They all use -webkit-perspective , but the final results differ a lot from the results got in Safari (Windows XP). So, after all, does Chrome support CSS 3D transforms? Or the support is still limited? Thanks! 回答1: Go

问题 I am using css 3d transforms in my project. I am trying to apply a new transform on the containing element of several other elements. I am also trying to use getBoundingClientRect on one of its child elements. That container also has other elements in it. When the container has this value for the transform css property: translateZ(1026px) rotateX(-90deg) rotateY(180deg) translateZ(439.001px) here's what element.getBoundingClientRect().top for that certain child element is: 77.953109741210944