保持箱阴影方向一致，同时旋转 [英] Keep box-shadow direction consistent while rotating

问题描述

当提供a < div> 一个盒子阴影以及旋转它将导致盒子阴影方向的旋转 - 这是有问题的，当盒子阴影应该创建一个错觉的照明。

示例：

这个问题的答案应该类似于这个模拟：

如何旋转< div> 并仍然保持框阴影的方向一致？

解决方案应该是纯CSS ...

注意：CSS中的动画是为了演示。用例将使用JavaScript设置旋转。但JavaScript不会知道盒子阴影，因为它是设计的责任定义一个（或许多...）阴影。

解决方案

保持偏移框的方向 - 在旋转期间阴影一致使用CSS变换很简单。

此方法依赖于以下事实：变换原点与变换一起移动。这意味着当在同一元素上设置多个变换时，每个变换的坐标系根据先前的变换而改变。

在以下示例中，蓝色元素是伪元素，shadow是div元素：

  div {width：40px; height：40px; margin：40px; box-shadow：0px 0px 10px 5px＃000;动画：spinShadow 2s无限; background-color：＃000;} @ keyframes spinShadow {to {transform：rotate（360deg）; }} div：before {content：''; position：absolute; left：-5px; top：-5px; width：50px; height：50px; transform：rotate（0deg）translate（-10px，-10px）rotate（0deg）;动画：inherit; animation-name：spinElt; background-color：＃0bb;} @ keyframes spinElt {to {transform：rotate（-360deg）translate（-10px，-10px）rotate（360deg）; }}  

 < div>< / div>  

伪元素的transition属性说明以下代码段用于说明步骤）：

  transform：rotate（-360deg）translate 10px，-10px）rotate（360deg）
  

1. rotate（-360deg）计数父元素的旋转，使伪元素为静态。


2. ）将伪元素转换为阴影偏移量


3. rotate（360deg）




  div {width：40px; height：40px; margin：40px; box-shadow：0px 0px 10px 5px＃000;动画：spinShadow 2s无限; background-color：＃000;} @ keyframes spinShadow {to {transform：rotate（360deg）; }} div：before {content：''; position：absolute; left：-5px; top：-5px; width：50px; height：50px;动画：inherit; background-color：＃0bb;}＃first：before {transform：rotate（0deg）; animation-name：first;} @keyframes first {to {transform：rotate（-360deg）; }}＃second：before {transform：rotate（0deg）translate（-10px，-10px）; animation-name：second;} @keyframes second {to {transform：rotate（-360deg）translate（-10px，-10px）; }}＃完成：before {transform：rotate（0deg）translate（-10px，-10px）rotate（0deg）; animation-name：complete;} @keyframes complete {to {transform：rotate（-360deg）translate（-10px，-10px）rotate（360deg）; }}  

 < ol& < li>计数器旋转：< div id =first>< / div>< / li> < li>翻译：< div id =second>< / div>< / li> < li>旋转：< div id =complete>< / div>< / li>< ol>  

div>




When giving e.g. a <div> a box-shadow as well as rotating it will cause a rotation of the box-shadow direction - which is problematic when the box-shadow should create an illusion of lighting.

Example: https://jsfiddle.net/5h7z4swk/

div {
  width: 50px;
  height: 50px;
  margin: 20px;
  box-shadow: 10px 10px 10px #000;
  display: inline-block;
}
#box1 {
  background-color: #b00;
}
#box2 {
  background-color: #0b0;
  transform: rotate(30deg);
}
#box3 {
  background-color: #00b;
  transform: rotate(60deg);
}
#box4 {
  background-color: #b0b;
  transform: rotate(90deg);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#box6 {
  background-color: #0bb;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box6"></div>

The answer to this problem should look similar to this mock up:

How can I rotate a <div> and still keep the box-shadow going the same direction?

The solution should be pure CSS...

Note: The animation in the CSS is for demonstration purposes. The use case will use JavaScript to set the rotation. But the JavaScript will know nothing about the box-shadow as it is in the responsibility of the design to define a (or many...) shadows. That's why it should be a pure CSS solution.

解决方案

Keeping direction of an offset box-shadow consistent during rotation is simple with CSS transforms.
This approach relies on the fact that the transform origin is moved with the transforms. This means that when several transforms are set on the same element, the coordinate system of each transform changes according to the previous ones.

In the following example, the blue element is a pseudo element and the shadow is the div element:

div {
  width: 40px; height: 40px;
  margin: 40px;
  box-shadow: 0px 0px 10px 5px #000;
  animation: spinShadow 2s infinite;
  background-color: #000;
}
@keyframes spinShadow {
  to { transform: rotate(360deg); }
}
div:before {
  content: '';
  position: absolute;
  left:-5px; top:-5px;
  width: 50px; height: 50px;
  transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
  animation:inherit;
  animation-name: spinElt;
  background-color: #0bb;
}
@keyframes spinElt {
  to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}

<div></div>

Explanation of the transition property on the pseudo element (See the following code snippet for an illustration of the steps):

transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg)

1. rotate(-360deg) counters the rotation of the parent to make the pseudo element static.
2. translate(-10px, -10px) the pseudo element is translated to make the shadow offset
3. rotate(360deg) the pseudo element is rotated in the same direction as parent

div {
  width: 40px; height: 40px;
  margin: 40px;
  box-shadow: 0px 0px 10px 5px #000;
  animation: spinShadow 2s infinite;
  background-color: #000;
}
@keyframes spinShadow {
  to { transform: rotate(360deg); }
}
div:before {
  content: '';
  position: absolute;
  left:-5px; top:-5px;
  width: 50px; height: 50px;
  animation:inherit;
  background-color: #0bb;
}
#first:before{
  transform: rotate(0deg);
  animation-name: first;
}  
@keyframes first {
  to { transform: rotate(-360deg); }
}
#second:before{
  transform: rotate(0deg) translate(-10px, -10px);
  animation-name: second;
}  
@keyframes second {
  to { transform: rotate(-360deg) translate(-10px, -10px); }
}
#complete:before{
  transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
  animation-name: complete;
}  
@keyframes complete {
  to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}

<ol>
  <li>Counter rotate:<div id="first"></div></li>
  <li>Translate :<div id="second"></div></li>
  <li>Rotate:<div id="complete"></div></li>
<ol>

这篇关于保持箱阴影方向一致，同时旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！