html阴影效果方向怎么改变,html – 旋转时保持盒子阴影方向一致

通过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); }

}

对伪元素的转换属性的说明(有关步骤的说明,请参阅以下代码段)：

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); }

}

1. Counter rotate:
2. Translate :
3. Rotate: