css-transforms

I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if i disable the positioning. CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } The html is just plain text. The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case. What it is doing is this: rotate the text 90 degrees. Ok.

I'm having this weird issue on Safari and Firefox (Mac/Yosemite) that causes almost all of the text on the page to flicker when hovering over the transforming element. Example gif: (Firefox, Yosemite) .usp { //USP has an icon that is defined below opacity: .4; @include transition(all .3s ease-in-out); &:hover { opacity: 1; @include transition(all .3s ease-in-out); .icon { @include transform(scale(1.1)); @include transition(all 1.7s ease-in-out); } } // :hover } .usp .icon { display: block; height: 75px; width: 75px; // Insert background-image sprite (removed from this example) @include

In the middle of my page I have a div element with some content in it (other divs, images, whatever). <div> before </div> <div id="content-to-scale"> <div>something inside</div> <div>another something</div> </div> <div> after </div> I would like to scale that element (content-to-scale) and all it's children. Seems like a job for CSS3 transform's scale operation. However, the problem is that this is a transform on the visualization of that element hierarchy only, it doesn't change the amount of space (or position) of the element on the page. In other words, scaling that element larger will

Given these two examples. Using Hover div { position: absolute; width: 150px; height: 40px; background: orange; left: 50%; top: var(--top); transition: transform 2s; transform: translateX(-50%); text-align: center; line-height: 40px; font-size: 1.2em; } div:hover { transform: translateX(-50%) rotate(var(--deg)); } div:nth-child(1) { --deg: 180deg; --top: 20%; } div:nth-child(2) { --deg: -180deg; --top: 40%; } div:nth-child(3) { --deg: 360deg; --top: 60%; } <div>180deg</div> <div>-180deg</div> <div>360deg</div> Using Animation div { position: absolute; width: 150px; height: 40px; background:

I think it may have something to do with a pseudo element, but I'm not sure. I am having difficulties with the effect of a transform transition using css3. In Firefox v24, the effect works as I want it to - see the CodePen here http://codepen.io/patrickwc/pen/aKEec but in Chrome and IE, the border effect of the links animate and then suddenly switch back into position. It is difficult to describe so the best way is to look at the effect in Firefox then in Chrome or IE. body { background: #000; color: #fff; } p { text-align: center; } nav.footer-social-links a { position: relative; margin: 0

I rotated a div with Text & wanted to Place it on the left top. I managed to place it at the top, but I can't get it working to align with the left edge. How do I do this? .credit { position: absolute; background-color: pink; transform: rotate(-90deg) translateX(-50%); } <div class="credit"> Picture by Name </div> Change the transform-origin to top left and make the translation -100% body { margin:0; } .credit { transform-origin: top left; position: absolute; background-color: pink; transform: rotate(-90deg) translateX(-100%); } <div class="credit"> Picture by Name </div> 来源： https:/