css-transforms

问题 Suppose I've 10 divs in the form of squares . Lets call it the home page. Out of these 10, 3 divs have class .event1 5 divs have class .event2 2 divs have class .event3 <div class="boxes event1"> ....//3-times .... </div> <div class="boxes event2"> ....//5-times .... </div> <div class="boxes event3"> ....//2-times .... </div> The boxes are placed next to one another. When I click event1 , all box fadeout except those having the class event1 . Similarly, for all classes. On clicking home , all

问题 I have a regular unordered list of items with display: flex and justify-content: space-between applied to it (as a result, .first_item touches the left edge of .list and .last_item touches the right edge of .list ): <ul class='list'> <li class='first_item'>Item</li> <li class='middle_item'>Item</li> <li class='last_item'>Item</li> </ul> However, if I shrink the items using transform: scale(0.5) , there is now a space at these two locations, as if justify-content: space-between was "unaware"

问题 We are using an open source application and everything is fine about it. The only thing I dont like about the product is it's layout & text size. If I zoom to 80% (either firefox or chrome browaer) then the application looks perfect. As our end users are not so tech savvy, I want the application to open in 80% zoom mode. Is there any way this can be done in css or jQuery. I tried below body { -moz-transform: scale(0.8, 0.8); /* Moz-browsers */ zoom: 0.8; /* Other non-webkit browsers */ zoom:

问题 I have div with CSS rotateX transform applied to it: -webkit-transform: perspective(500px) rotateX(60deg) rotateY(60deg) ; and a bunch of smaller div's floated in it, with :hover rule applied to them. The problem is that only half of inner divs react to :hover event. JsFiddle: http://jsfiddle.net/fNxgn/4/ 回答1: if you remove in css height: 200px all block will react hover event 来源： https://stackoverflow.com/questions/10534697/hover-works-only-on-lower-part-of-rotatex-transformed-div

问题 I got a strange problem with IE11 and 10 when i try to animate a transform translateY() with transitions. I have a skybox with a sky inside which is 500vh height. this sky has to be moved up and down according to the current section in the viewport. the viewport is an absolute:position element which handels the content and so on. when i now set the sky to lets say transform: translateY(-400vh), then it works correctly in every browser except IE11 and 10. it looks like the element disappears

问题 I have an SVG, in which some elements are rotated depending on a mediaquery, like this: @media (max-width: 480px) { rect { transform: rotate(10deg); } } The element rotates just fine, but (at least in Chrome) it refuses to go back. Why is that? Other directives, such as fill, work in both direction. JSFiddle: http://jsfiddle.net/MM3VC/1/ 回答1: I'm not sure why it doesn't rotate back but you could try this which goes back when the viewport gets wider rect { -webkit-transform: rotate(0); -moz

问题 In my project I have screen which should ease-in from right side of the screen so for that thing I have used transform: translateX(100%) and then changing that to transform: translateX(0%) . it works fine I able to achieve the ease-in effect but in that screen I have action button which has css property of Position: Fixed;Bottom: 0px; but this is not working I mean its not sticking in the bottom of the screen. Here is my JSfiddle : https://jsfiddle.net/sureshpattu/a1seze4x/ Html: <header>

问题 Goal I'm working on a collapsible sidebar using jQuery for animation. I would like to have vertical text on the sidebar that acts as a label and can swap on the animateOut/animateIn effect. Normally I would use an image of the text that I've simply swapped vertically, and switch it out on animation, but with CSS3 transforms I'd like to get it to work instead. Problem The problem I'm facing is that setting the height on my rotated container makes it expand horizontally (as it's rotated 90deg)

问题 I have this ice cream cone SVG graphic, and I want to transform the scoop with a transform-origin of 50% 100% (center bottom). Firefox claims to obey (i.e. the inspector notes the correct transform-origin ) but in fact transforms about the upper left corner. WebKit, bizarrely, will only obey if a parent element has font-size:100% set. These are very similar questions but only pertain to Firefox: Setting transform-origin on SVG group not working in FireFox How to set transform origin in SVG

问题 I am trying to create a simple effect so that when I hover on the inner most circle, the two outer rings rotate around to create a cool effect. I thought this would be an easy task but I cannot seem to figure out what I am doing wrong. When I hover over the inner circle, all that changes are the two inner rings move towards the bottom right hand corner of the screen, without rotating at all. What am I missing here? Thanks .wrapper { position: relative; width: 400px; height: 400px; margin: