css-transforms | 易学教程

CSS rotation and text distortion

阅读更多关于 CSS rotation and text distortion

问题 Creating a spreadsheet-style view and rotating the column causes the text to distort in Chrome + Firefox. I've managed to work around the Chrome issue using: -webkit-backface-visibility: hidden; However I'm left with Firefox looking like this : Chrome (with fix) Oddly IE 10 renders this perfectly - and Mac browsers do a better job too. Any suggestions greatly appreciated 回答1: As of Firefox v16, Mozilla implements the unprefixed backface-visibility property, which might work for you: -webkit

How keep the image rotated during the reverse movement?

阅读更多关于 How keep the image rotated during the reverse movement?

问题 I'm having a trouble with the effect I want to create. My body in the HTML file it's just a div with two images. I was trying to give animation to the first image in the following way: in 0% it starts at the beginning of the div (the fish's head is on the right) in 100% it ends in the end, but at this point I want to rotate the image and keep that effect until it gets 0% again. (that is, the fish should point towards the left during the reverse motion) But it just rotates in 100% and no more.

Difference between transform: translate and position:relative;?

阅读更多关于 Difference between transform: translate and position:relative;?

问题 As the title says, what are the differences between transform: translate(x, y) and position: relative. Since they both accomplish the same thing (position elements) anyway, then how do they differ in purpose and application? I read an article about centering elements using "transform: translate;" that said it is better to use "transform" due to GPU and optimization reason, but I don't really see the problem since it's not a big deal anyway if you're just re-positioning an element and not

Border radius and overflow aren't respected when animation is added on a different element

阅读更多关于 Border radius and overflow aren't respected when animation is added on a different element

问题 I got a weird behavior when working with transform in CSS3. Here is my code: *, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .btn_exchange a { position: relative; text-decoration: none; display: block; width: 150px; float: left; color: #ffffff; font-size: 14px; background: #0ea2d3; box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75); text-align: center; font-weight: bold; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform:

Are 2D transforms hardware accelerated in Mobile Safari?

阅读更多关于 Are 2D transforms hardware accelerated in Mobile Safari?

问题 I've often been told that CSS 3D transforms are hardware accelerated in Mobile Safari which makes me wonder if the implication is that 2D transforms are not? I can think of no reason why they wouldn't be, since they can basically all be implemented as 3D transforms, but I would like to know for sure. If it turns out that 2D transforms are not hardware accelerated, any insight as to why would be much appreciated. 回答1: You're right, CSS 2D transforms aren't hardware accelerated in Mobile Safari

Absolutely positioned element positions relatively to transformed element

阅读更多关于 Absolutely positioned element positions relatively to transformed element

I recreated an issue that I am encountering in a template. There is a nav that has position: relative; . Inside the nav there is a div with two lists nested. One of the lists is position absolutely to stick to the bottom of the nav . The problem occurs when the div has a transformation applied to it. When the div in between the absolutely and relatively positioned elements get's a transform property, the absolute list positions itself relatively to the div instead of the nav . MDN Docs state the following about position:absolute Do not leave space for the element. Instead, position it at a

Do CSS transformed elements have default z-index?

阅读更多关于 Do CSS transformed elements have default z-index?

问题 I've a pretty basic example here, am having a fixed header with other elements which are stacked one after another, single element is transformed using transform: rotate(360deg) . So only the transformed element is getting over the fixed bar when the page is scrolled, where other elements doesn't. So the question is do transformed elements have default z-index ? When you use z-index: -1; for .transform_me it behaves normal Demo CSS .fixed { height: 30px; background: #f00; position: fixed;

CSS bad rendering in translateZ( ) vs scale( )

阅读更多关于 CSS bad rendering in translateZ( ) vs scale( )

问题 I noticed that there is a big quality difference when transforming text in this 2 ways: .text1 { width: 200px; height: 22px; position: absolute; top: 40%; left: 0; transform-origin: 50% 50%; transform: scale(2); /* here */ color: red; text-align: center; font-size: 22px; } .text2 { width: 200px; height: 22px; position: absolute; top: 60%; left: 0; transform-origin: 50% 50%; transform: translateZ(400px); /* here */ text-align: center; font-size: 22px; } .perspective { width: 200px; height:

css animation rotate and translate doesn't work together [duplicate]

阅读更多关于 css animation rotate and translate doesn't work together [duplicate]

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: red; } 25% { transform: translate(125px); transform: rotate(360deg); color: green; } } The correct way to

Fixed element in transform translate container not working

阅读更多关于 Fixed element in transform translate container not working

问题 I have a wrapper box that I want to animate with transform translate but if I do this I can't use fixed element inside. example : <div class="wrapper"> <div class="box-content"> <div class="fixed-element"> </div> </div> </div> <style type="text/css"> .wrapper { transform: translateX(50px); background: pink; } .box-content { height: 1000px; background: green; } .fixed-element{ position: fixed; top: 0; left: 0; width: 50px; height: 50px; background: blue; } </style> https://jsfiddle.net