css-transforms

CSS3 transform rotate text, fixed position left and right, vertically centered

由 狂风中的少年 提交于 2019-12-03 17:37:01
问题 I'm trying to position one element to the left and one to the right of the browser window, both contains an ul with CSS transform rotate. I have managed to position .rotate-left and its ul to the left, but I have been unable to position the ul inside .rotate-right to the right. (It needs to be visible on a horizontal line from right to left if transform is not supported.) CSS: .rotate-left ul li, .rotate-right ul li { display: inline; } .rotate-left { position: fixed; top: 0; left: 0; bottom:

CSS Transform not working in IE 8

由 回眸只為那壹抹淺笑 提交于 2019-12-03 16:06:11
I am attempting to rotate or transform a div using the CSS Transform property. Here is my transform CSS Code: -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); transform: rotate(270deg); The above code works great in all but IE 8. I need to find a way to support IE 8. How can I create a fallback for IE8? Note: I am using jQuery (1.8.2), HTML 5 Doctype and modernizr if that makes a difference in the answer you provide. I prefer a CSS only solution but

Browser-specific prefixes with a CSS transition on transform

由 老子叫甜甜 提交于 2019-12-03 12:29:45
问题 According to caniuse.com, for those browsers that support both CSS transition and CSS transform , combinatorically there are at least three different types: Those that require the -webkit- prefix on both transition and transform (e.g. Safari 6, Android browser < 4.4). Those that only require the -webkit- prefix on transform (e.g. Chrome 3x). Those that require prefixes on neither (e.g. FF and IE10/11). How can I safely write my transition styles so that they are parsed correctly in each type?

Unskewed child not aligning

由 南笙酒味 提交于 2019-12-03 11:29:20
问题 Note: This question is about a problem with output, and not about creation of any shape. I recently created a shape : .prog { position: relative; top: 20px; width: 150px; height: 120px; background: green; display: inline-block; transform: skewY(20deg); transform-origin: 0% 100%; transition: 0.8s ease; } .prog:before { content: ""; position: absolute; left: 150px; width: 150px; height: 120px; background: red; transform: skewY(-40deg); transform-origin: 0% 100%; transition: 0.8s ease; } <div

translate3d vs translate performance

由 余生颓废 提交于 2019-12-03 10:24:40
问题 We now all know, particularly from that nice article, that we should prefer css-transforms to animate position. But we got the choice between translate() and translate3d() ... Which one is generally faster? 回答1: This site below runs tests comparing translate() , translate3d() , and a couple other properties. According to it, translate3d() is faster in most browsers. http://jsperf.com/translate3d-vs-xy 回答2: The use of translate3d pushes CSS animations into hardware acceleration. Even if you're

Skew div border of one side only using one div only

由 ￣綄美尐妖づ 提交于 2019-12-03 08:41:09
I have created a skewed div using following css #outer-left{ -ms-transform: skew(-30deg,0deg); /* IE 9 */ -webkit-transform:skew(-30deg,0deg); /* Chrome, Safari, Opera */ transform: skew(-30deg,0deg); background:#333333; width:200px; z-index:20; border-bottom:3px solid #2E8DEF; padding:10px 30px 10px 75px; font-size:20px; color:#2E8DEF; position:relative; left:-50px; } #outer-left:after{ content:""; display:inline-block; position:absolute; width:20px; height:100%; background:#2E8DEF; float:right; right:0px; top:0px; z-index:10; } #inner-left{ -ms-transform: skew(30deg,0deg); /* IE 9 */ -webkit

How to smoothly animate height in CSS or Javascript on mobile devices

由 假如想象 提交于 2019-12-03 08:19:13
问题 I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations. Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button). The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware

How to get actual (not original) height of a CSS-rotated element

由 ☆樱花仙子☆ 提交于 2019-12-03 07:30:42
问题 I need to obtain actual height of several different elements (for the sake of precise custom tooltip positioning), and some of these elements (not all) are rotated. $(elem).outerHeight() returns the original height, instead of the actual displayed height. Here's the fiddle with a very simple example: http://jsfiddle.net/NPC42/nhJHE/ I see a possible solution in this answer: https://stackoverflow.com/a/8446228/253974, but am still hoping there is a simpler way. 回答1: Dusting off my high school

What does the scaleZ() CSS transform function do?

由 旧巷老猫 提交于 2019-12-03 05:55:12
问题 I’m trying to wrap my tiny brain around 3D CSS transforms, and I‘m having trouble understanding what the scaleZ() function is for. scale() , scaleX() and scaleY() make sense: they stretch the element along the axis specified, multiplying its dimension along that axis by the number you provide. But scaleZ() seems different: It applies to children of the element It doesn’t affect the dimensions of the child elements, as HTML elements don’t have any dimension along the z-axis (i.e. you can’t

Horizontal CSS only parallax effect with layers greater than 100vw

由 早过忘川 提交于 2019-12-03 05:40:06
问题 How to bootstrap a site with horizontal CSS only parallax effect ? Requirements CSS only parallax parent layer must have width/height == 100vw/100vh child layers must have width/height > 100vw/100vh child layers must visually align 100% with parent layers width by now the child layers technically do have 100% of parents width but due to the perspective they visually don't appear to take 100% of parents width child layers (except the first) must have a top offset relative to its parent results
订阅 css-transforms