css-transforms

问题 I\'m trying to get a transition hover effect on border that the border expands on hover. h1 { color: #666; } h1:after { position: absolute; left: 10px; content: \'\'; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0; } h1:hover:after { opacity: 1; } <h1>CSS IS AWESOME</h1> I\'ve tried this on Jsfiddle 回答1: To expand the bottom border on hover , you can use transform:scaleX'(); (mdn reference) and transition

问题 I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn\'t producing the correct results. Code below: @-webkit-keyframes ripple_large { 0% {-webkit-transform:scale(1);} 75% {

问题 This question already has answers here : Closed 6 years ago . Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $(\"#element\").css(\"-webkit-transform\", \"translateX(\" + value + \"px)\"); Right before the transition takes place, there is a flicker. Any idea why this is,

问题 I am trying to create a triangle shape with the pseudo elements. like the one in the image below. But this is what i get. Here is what i have tried this far. .container .form--container:before { content: \"\"; position: absolute; top: 0px; left: 130px; width: 28px; height: 28px; transform: translate(-1rem, -100%); border-left: 1.5rem solid #979797; border-right: 1.5rem solid #979797; border-bottom: 1.5rem solid white; } 回答1: The issue is with the use of border. you can check this link How do

问题 I am currently working on a website and encountered this weird behaviour. I am not sure if it is a bug or how to deal with it so I\'m asking you guys for help. So I have this title-screen \"animation\" that has the title centered in a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working example with the expected behaviour, from which I stripped all unnecessary code to make it minimal: $(window).scroll( () => { \"use strict\"; let

问题 Let\'s say I have a couple of columns, of which some I\'d like to rotate the values of: http://jsfiddle.net/MTyFP/1/ <div class=\"container\"> <div class=\"statusColumn\"><span>Normal</span></div> <div class=\"statusColumn\"><a>Normal</a></div> <div class=\"statusColumn\"><b>Rotated</b></div> <div class=\"statusColumn\"><abbr>Normal</abbr></div> </div> With this CSS: .statusColumn b { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; transform: rotate(-90deg)

问题 I wanted to mirror letter E in the word WEBLOG so I used CSS transform property but it doesn\'t work if I wrap the text inside a span but it works if I assing display: inline-block; or display: block; So transforms doesn\'t apply to inline elements? Example 1 (Fails To Transform) <h1>W<span>E</span>BLOG</h1> h1 span { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform

问题 I have a situation where, in normal CSS circumstances, a fixed div would be positioned exactly where it is specified ( top:0px , left:0px ). This does not seem to be respected if I have a parent that has a translate3d transform. Am I not seeing something? I have tried other webkit-transform like style and transform origin options but had no luck. I have attached a JSFiddle with an example where I would have expected the yellow box be at the top corner of the page rather than inside of the