我也用CSS画一把扇子

网站前端开发_前端开发者丨css

https://www.rokub.com

其中也发现一个问题。
transform竟然会使z-index失效。

代码：

<div></div><div></div><div></div><div></div><div></div><br /><br /> <div></div><div></div><div></div><div></div><div></div><br /><br /> <div></div><div></div><div></div><div></div><div></div><br /><br /> <style><br /><br /> <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>{<br /><br /> overflow:hidden;<br /><br /> }<br /><br /> body{<br /><br /> background:#00ffff;<br /><br /> }<br /><br /> div{<br /><br /> width:10px;<br /><br /> height:500px;<br /><br /> background:#ff83fa;<br /><br /> position:absolute;<br /><br /> top:10%;<br /><br /> left:50%;<br /><br /> transform-origin:center 90%;<br /><br /> transition: transform 2s;<br /><br /> border-left:1px solid pink;<br /><br /> border-right:1px solid pink;<br /><br /> }<br /><br /> div:before,<br /><br /> div:after{<br /><br /> content:”;<br /><br /> position:absolute;<br /><br /> height:300px;<br /><br /> width:20px;<br /><br /> }<br /><br /> div:before{<br /><br /> border-top: 300px solid #dddddd;<br /><br /> border-right:25px solid transparent;<br /><br /> }<br /><br /> div:after{<br /><br /> left:-35px;<br /><br /> border-top:300px solid white;<br /><br /> border-left:25px solid transparent;<br /><br /> }<br /><br /> div:first-of-type:after,<br /><br /> div:last-of-type:before,<br /><br /> div:last-of-type:after{<br /><br /> border-top: 300px solid #ff83fa;<br /><br /> }<br /><br /> body:hover div:nth-of-type(1){<br /><br /> transform:rotate(-70deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(2){<br /><br /> transform:rotate(-60deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(3){<br /><br /> transform:rotate(-50deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(4){<br /><br /> transform:rotate(-40deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(5){<br /><br /> transform:rotate(-30deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(6){<br /><br /> transform:rotate(-20deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(7){<br /><br /> transform:rotate(-10deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(8){<br /><br /> transform:rotate(0deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(9){<br /><br /> transform:rotate(10deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(10){<br /><br /> transform:rotate(20deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(11){<br /><br /> transform:rotate(30deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(12){<br /><br /> transform:rotate(40deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(13){<br /><br /> transform:rotate(50deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(14){<br /><br /> transform:rotate(60deg)<br /><br /> }<br /><br /> body:hover div:nth-of-type(15){<br /><br /> transform:rotate(70deg)<br /><br /> }<br /><br /> </style><br /><br /> <script><br /><br /> document.addEventListener(‘mousemove’, function(e) {<br /><br /> this.body.style.transform = ‘rotateZ(-‘ + e.y / 50 + ‘deg)'<br /><br /> }, false);<br /><br /> </script>

网站前端开发_前端开发者丨css

https://www.rokub.com