Keep box-shadow direction consistent while rotating

Question

When giving e.g. a

a box-shadow as well as rotating it will cause a rotation of the box-shadow direction - which is problematic when the box-shadow

Answer 1

Inspired by the other answers I created my own answer as well: https://jsfiddle.net/zoxgbcrg/1/

.shadow {
  background-color: black !important;
  width: 40px;
  height: 40px;
  box-shadow: 0px 0px 10px 5px #000;
  margin-top: 35px;
  margin-left: 35px;
  position: absolute;
  z-index: -1;
}

The trick is also to create an additional

to handle the shadow. In my case it's not a :before but a real DOM element that is moved by margin.

Note: it seems that of today (31.01.2016) Firefox and Chrome have a subtile rendering difference. So for Firefox https://jsfiddle.net/zoxgbcrg/ is creating the desired result, for Chrome I suggest https://jsfiddle.net/zoxgbcrg/1/

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...