HTML CSS examples for CSS Property:box-shadow
Keep box-shadow direction consistent while rotating
<html> <head> <title>Lorem ipsum dolor sit amet,</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!-- w w w .j av a 2 s.c o m--> width:51px; height:51px; margin:21px; display:inline-block; } .shadow { background-color:Chartreuse; -webkit-filter:blur(6px); filter:blur(6px); margin-top:31px; margin-left:31px; position:absolute; z-index:-2; } .box1 { background-color:yellow; } .box2 { background-color:blue; transform:rotate(31deg); } .box3 { background-color:pink; transform:rotate(61deg); } .box4 { background-color:OrangeRed; transform:rotate(91deg); } .box5 { background-color:grey; animation-name:spin; animation-duration:3s; animation-iteration-count:infinite; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(361deg); } } </style> </head> <body> <div class="box1 shadow"></div> <div class="box1"></div> <div class="box2 shadow"></div> <div class="box2"></div> <div class="box3 shadow"></div> <div class="box3"></div> <div class="box4 shadow"></div> <div class="box4"></div> <div class="box5 shadow"></div> <div class="box5"></div> </body> </html>