当给予例如a< div>盒子阴影以及旋转它将导致盒子阴影方向的旋转 – 当盒子阴影应该产生照明的错觉时,这是有问题的.
示例：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>
这个问题的答案应该看起来类似于这个模拟：
如何旋转< div>仍然保持盒子阴影朝着同一个方向前进？
解决方案应该是纯CSS …
注意：CSS中的动画用于演示.用例将使用JavaScript来设置旋转.但是,JavaScript将不会对盒子阴影产生任何影响,因为设计的责任在于定义一个(或许多…)阴影.这就是为什么它应该是一个纯CSS的解决方案.
解决方法
通过CSS变换,保持偏移框 – 阴影在旋转过程中一致的方向是简单的.
这种方法依赖于 transform origin与转换一起移动的事实.这意味着当在同一个元素上设置几个变换时,每个变换的坐标系根据以前的变化而变化.
这种方法依赖于 transform origin与转换一起移动的事实.这意味着当在同一个元素上设置几个变换时,每个变换的坐标系根据以前的变化而变化.
在以下示例中,蓝色元素是伪元素,阴影是div元素：
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>
对伪元素的转换属性的说明(有关步骤的说明,请参阅以下代码段)：
transform: rotate(-360deg) translate(-10px,-10px) rotate(360deg)
旋转(-360deg)计数父对象的旋转,使伪元素静态.
> translate(-10px,-10px)将伪元素翻译成阴影偏移
旋转(360度),伪元素沿与父方向相同的方向旋转
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>
