当给予例如用<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与转换一起移动的事实。这意味着当在同一元素上设置多个变换时,每个变换的坐标系都会根据先前的变换而变化。
在以下示例中,蓝色元素是伪元素,阴影是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>
伪元素上的transition属性的说明(有关步骤的说明,请参见以下代码段):
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>
关于html - 旋转时保持盒子阴影方向一致,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35102216/