当给予例如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>仍然保持盒子阴影朝着同一个方向前进?
解决方案应该是纯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>