给予,例如一个<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;
}
&#13;
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box6"></div>
&#13;
这个问题的答案应该类似于这个模拟:
如何旋转<div>
并仍保持方框阴影方向相同?
解决方案应该是纯CSS ...
注意:CSS中的动画用于演示目的。用例将使用JavaScript来设置旋转。但JavaScript对盒子阴影一无所知,因为定义一个(或许多......)阴影是设计的责任。这就是为什么它应该是纯CSS解决方案。
答案 0 :(得分:23)
使用CSS变换,在旋转期间保持偏移框阴影的方向很简单。
这种方法依赖于transform origin与变换一起移动的事实。这意味着当在同一元素上设置多个变换时,每个变换的坐标系将根据先前的变换而变化。
在下面的示例中,blue元素是一个伪元素,shadow是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)
rotate(-360deg)
反对父项的旋转,使伪元素成为静态。translate(-10px, -10px)
将伪元素转换为阴影偏移rotate(360deg)
伪元素以与父
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>
答案 1 :(得分:8)
你也可以在动画帧中整合盒子阴影方向:
div {
display: inline-block;
margin: 1em ;
height: 50px;
width: 50px;
box-shadow: 15px 15px 15px 5px gray;
animation: rte 5s infinite linear;
}
.red {
background: red
}
.green {
background: green;
animation-delay:2s;
}
.blue {
background: blue;
animation-delay:4s;
}
.bob {
background: #b0b;
animation-delay:6s;
}
.cyan {
background: cyan;
animation-delay:8s;
}
@keyframes rte {
25% {
box-shadow: 15px -15px 15px 5px gray;
}
50% {
box-shadow: -15px -15px 15px 5px gray;
}
75% {
box-shadow: -15px 15px 15px 5px gray;
}
100% {
transform: rotate(360deg);
}
}
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="bob"></div>
<div class="cyan"></div>
答案 2 :(得分:0)
受其他答案的启发,我也创造了自己的答案: 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;
}
&#13;
<div class="box1 shadow"></div><div class="box1"></div>
&#13;
诀窍还在于创建一个额外的<div>
来处理阴影。就我而言,它不是:before
,而是由margin
移动的真实DOM元素。
注意:看起来今天(2016年1月31日)Firefox和Chrome有着微妙的渲染差异。因此,对于Firefox https://jsfiddle.net/zoxgbcrg/正在创建所需的结果,对于Chrome我建议https://jsfiddle.net/zoxgbcrg/1/