css-transforms

How to rotate pseudo element css

由 半腔热情 提交于 2020-01-24 09:53:25
问题 I want to recreate this icon using css pseudo elements (as a toggle indicator): I have created the nececcary pseudo elements using ::after, ::before and tried to rotate them using transform: rotate(90deg) . How can I tell them to rotate around their own center? I have tried transform-origin: 50% 50%; which does not work. Right now, both pseudo elements got the same right: 10px; but they are not placed above each other, instead they are next to each other. You can check this JS FIDDLE to

CSS 3D transform - Unable to click link

由 那年仲夏 提交于 2020-01-24 09:12:07
问题 I'm attempting to include a CSS 3D transform effect on my webpage, though I have some issues with clicking the links once the card has flipped over. Question Why is this occurring? How could this be solved so I can click the link once I flipped the card? Example http://jsfiddle.net/rbWFt/ Code <!DOCTYPE html> <html> <head> <title>Flipp</title> <meta charset="utf-8"> <style> .thumb { display:block; width:300px; height:340px; position:relative; margin:50px; float:left; } .thumb-wrapper {

mix-blend-mode is broken by 3D transformations on page

由 和自甴很熟 提交于 2020-01-24 03:28:05
问题 I was fiddling with the mix-blend-mode property. Everything works fine until I add something like transform: perspective(100px) or any other 3d transformation anywhere on the page, then it breaks completely. The transformation is applied but the blend mode is gone. I tested on chrome and firefox and on linux and windows and it's the same everywhere, however on a different computer it worked fine (I don't remember what version of chrome it had and was running ubuntu). Is that something that

How to Slant/Skew only the bottom of the div

由 瘦欲@ 提交于 2020-01-22 22:20:09
问题 I have been trying to add a Skew/Slant to the bottom of a div. I have had some success, as you can see below in my JSFiddle, I have managed to apply the skew but it's not completely how I wanted it. https://jsfiddle.net/hcow6kjr/ Currently the Skew is applied to the top and bottom of the div the image resides in, this skew also seems to be applied to the image itself (if you take the skew off, you will see the image slightly rotate back to normal). I was wondering if it's possible to do the

How to prevent children from inheriting 3d transformation CSS3? [duplicate]

由 ╄→尐↘猪︶ㄣ 提交于 2020-01-22 03:27:07
问题 This question already has an answer here : css isometric view with non iso-metric children (1 answer) Closed 9 days ago . How to prevent children from inheriting 3d transformation CSS3? I have a parent div and a child div, now I want to let parent using 3d transformation and the child div keep front. Example: .parent { transform: rotateX(33deg) rotateY(66deg) rotateZ(99deg); position: relative; width: 300px; height: 300px; margin: 50px auto; border: 4px solid darkblue; } .child { position:

Text blurry after 3D transform

由 帅比萌擦擦* 提交于 2020-01-19 05:11:46
问题 I have a div that I've rotated around the X-axis with perspective. The div contains text that gets blurry when the rotation is applied. Is there any way to get the text sharp on rotation around this axis? I've tried the translate3d and translateZ "hack" but without success. .tilt { margin: 0 auto; width: 300px; height: 400px; border: 1px solid #222; -webkit-transform: perspective(500px) rotateX(35deg); -moz-transform: perspective(500px) rotateX(35deg); transform: perspective(500px) rotateX

Rotated text producing inconsistent results

由 北城余情 提交于 2020-01-16 02:04:07
问题 I'm trying to display rotated text whereby its always absolute positioned to the bottom of its parent. The parent is 100% height of the browser window and I'd like the text to appear 50px from the bottom for all browser/screen sizes. Here's my code: html,body,.carousel,.carousel a.item { height: 100%; } .carousel a.item { height: 100%; padding-top: 100px; position: relative; overflow: hidden; width: 25%; float: left; } .rotate { zoom: 1; white-space: nowrap; position: absolute; bottom: 0;

Align to left side of contaner a element rotated -90deg

由 ↘锁芯ラ 提交于 2020-01-15 03:50:07
问题 div { width: 300px; height: 300px; border:1px solid black; } h1 { width: 300px; transform: rotate(-90deg) } <div> <h1>Hola</h1> </div> If you try this snippet, you will see that the h1 is rotated and placed in the center of the div (makes sense, they have same width) But how to align it to the left? (flexible container's width) 回答1: check this out it will give a direction to your required solution.. div { width: 300px; height: 300px; border: 1px solid black; } h1 { width: 70px; margin-left:

Webkit: CSS3 2D transform Scale + cubic bezier issue (when argument > 1)

由 爱⌒轻易说出口 提交于 2020-01-14 19:13:31
问题 I wanted to create a "bouncy" animation for an element using: div{ -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -webkit-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2); -moz-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2); -ms-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2); } div.fire{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); } Fairly simple. Using the scale transform, I hide the element completely (or

Aligning an element rotated in css

由 吃可爱长大的小学妹 提交于 2020-01-14 08:43:20
问题 I trying to rotate a div on a page and have it rest right up against the left side of its parent element (the body in this case). I know about transform-origin but no matter what values I insert it doesn't align correctly. http://jsfiddle.net/QpHCM/ HTML <div class="handle">Text</div> CSS (Sass) $transform: rotate(90deg); $transform-origin: 0 0; body { border: 1px solid red; } .handle { width: 50px; height: 15px; background: blue; color: white; text-align: center; padding: 5px; line-height:
订阅 css-transforms