css-transforms | 易学教程

Hexagon grid shapes (via transform) produces glitches in Safari (10.1 Mac OS)

阅读更多关于 Hexagon grid shapes (via transform) produces glitches in Safari (10.1 Mac OS)

问题 I need a flexible, big hexagon grid, ideally in pure CSS (no pre-processing or JS shenanigans) hexagon dimensions in percent , so everything is nice and responsive The solution I hacked together from this great answer is elegant and all, but produces really ugly glitches in Safari (10.1 on macOS 10.12.4), when zooming in our out (via pinch to zoom or CMD +/- ). The edges are all screwed up, and it takes a while to clear up, sometimes it doesn't clear up at all. html, body { margin: 0; padding

How to create a perspective shadow with CSS only?

阅读更多关于 How to create a perspective shadow with CSS only?

I know about the box-shadow property in CSS, but this produces a shadow that looks like being projected on a wall right behind the element. I need to create a shadow that looks like the element is standing on the ground like this: This is what I have so far: div { display: inline-block; height: 150px; width: 150px; background: url(//placehold.it/150x150); margin-left: 20px; box-shadow: -5px 5px 10px 0 rgba(0,0,0,0.75); } <div></div> <div></div> You can achieve this without using the box-shadow property on the element itself, but on the pseudo element ::before . transform: skewX(60deg); will

How to flip multiple divs using CSS?

阅读更多关于 How to flip multiple divs using CSS?

问题 How can I flip multiple div 's when I clicked on menus using CSS3? This code is working for only the last two div s : HTML Code <ul class="nav"> <li><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#work">work</a></li> <li><a href="#contact">contact</a></li> </ul> <section class="container"> <div id="card"> <div class="front flipper" id="home">home</div> <div class="back flipper" id="about">about</div> <div class="front flipper" id="work">work</div> <div class=

CSS Scale transform on child not affecting parent size

阅读更多关于 CSS Scale transform on child not affecting parent size

问题 I have a component that is too large and I want to shrink it down. I'm able to do so with a scale transform, but the parent container doesn't shrink to fit. In my real code, the div with the SHRINK-ME class is actually an Angular calendar component, but this simplified repo reproduces the same effect. I can't just scale the wrapping parent div as I need to use the Bootstrap column grid classes to accommodate objects omitted from this example. Am I missing a simple CSS property here? .parent {

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 Bryson Gilbert As of Firefox v16, Mozilla implements the unprefixed backface-visibility property, which might work for you: -webkit-backface-visibility: hidden; backface-visibility: hidden; IE10 will pick this up as well. More

Div elements to follow a curved path with CSS3

阅读更多关于 Div elements to follow a curved path with CSS3

问题 So the basic idea is 1 - 9 seats at a curved table as though you are looking at them through first person view. I'm trying to get div elements which would be seats to flow on the outside of another div element that has a border radius to make it a semi oblong circle. I've found a few examples with an element being animated to flow across the container in an arc, but I will need the div/seats to be static. I am looking for any ideas or examples that can lead me in the right path. 回答1: Finding

Is the CSS3 transform translate percentage values relative to its width and/or height?

阅读更多关于 Is the CSS3 transform translate percentage values relative to its width and/or height?

问题 I think it is true that when we do a CSS3 transform translate using a percentage value, then that percentage is relative to its own width or height, so (50%, 75%) means 50% of its own width, 75% of its own height, but I can't find any specs that say that. Example: https://jsfiddle.net/cstsyw3s/1/ using: transform: translate(100%, 100%) I looked into http://www.w3.org/TR/css3-transforms but can't find it mentioned there -- I could only find such as for transform-origin , the "percentages:

translate3d between 0% and negative % in IE10

阅读更多关于 translate3d between 0% and negative % in IE10

问题 I have an element that needs to animate left and right to the amount of 50% of its full width. I've accomplished this with the following (simplified) markup: <div class="wrapper"> <div class="inner">Inner</div> </div> And style: .wrapper { position: relative; width: 300px; height: 200px; } .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: MOVE_AROUND 5s infinite; } With keyframe animation: @keyframes MOVE_AROUND { 0%, 10% { transform: translate3d(0, 0, 0); } 20%,

How to exact set a dynamic style transform using Javascript?

阅读更多关于 How to exact set a dynamic style transform using Javascript?

问题 I know method of setting transform, but I want to set the rotate and to keep others such as scale and skew. Perhaps, we can write a function as: // A variable of element, not parameter. separate out it make more clear. var el = document.getElementById('el'); function setTransform (p_name, p_value) { // how to write some code to set the el transform style... } Moreover, I have a element: <div id="el" style="transform: rotate(45deg) skew(45deg);"></div> And to us our function setTransform:

CSS diagonal lines - how to fit into its parent element?

阅读更多关于 CSS diagonal lines - how to fit into its parent element?

How can I make a diagonal line fill in and fit into a box (just pure css - without any use of background image)? div.diagonal-container { border: 1px solid #000; width:400px; height:400px; margin: 0 auto; } .to-right, .to-left { border-top:1px solid #ff00ff; width:100%; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .to-right { -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } <div