html – 旋转时保持盒子阴影方向一致

前端之家收集整理的这篇文章主要介绍了html – 旋转时保持盒子阴影方向一致前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当给予例如a< div>盒子阴影以及旋转它将导致盒子阴影方向的旋转 – 当盒子阴影应该产生照明的错觉时,这是有问题的.

示例:https://jsfiddle.net/5h7z4swk/

  1. div {
  2. width: 50px;
  3. height: 50px;
  4. margin: 20px;
  5. Box-shadow: 10px 10px 10px #000;
  6. display: inline-block;
  7. }
  8. #Box1 {
  9. background-color: #b00;
  10. }
  11. #Box2 {
  12. background-color: #0b0;
  13. transform: rotate(30deg);
  14. }
  15. #Box3 {
  16. background-color: #00b;
  17. transform: rotate(60deg);
  18. }
  19. #Box4 {
  20. background-color: #b0b;
  21. transform: rotate(90deg);
  22. }
  23. @keyframes spin {
  24. from {
  25. transform: rotate(0deg);
  26. }
  27. to {
  28. transform: rotate(360deg);
  29. }
  30. }
  31. #Box6 {
  32. background-color: #0bb;
  33. animation-name: spin;
  34. animation-duration: 2s;
  35. animation-iteration-count: infinite;
  36. }
  1. <div id="Box1"></div>
  2. <div id="Box2"></div>
  3. <div id="Box3"></div>
  4. <div id="Box4"></div>
  5. <div id="Box6"></div>

这个问题的答案应该看起来类似于这个模拟:

如何旋转< div>仍然保持盒子阴影朝着同一个方向前进?

解决方案应该是纯CSS …

注意:CSS中的动画用于演示.用例将使用JavaScript来设置旋转.但是,JavaScript将不会对盒子阴影产生任何影响,因为设计的责任在于定义一个(或许多…)阴影.这就是为什么它应该是一个纯CSS的解决方案.

解决方法

通过CSS变换,保持偏移框 – 阴影在旋转过程中一致的方向是简单的.
这种方法依赖于 transform origin与转换一起移动的事实.这意味着当在同一个元素上设置几个变换时,每个变换的坐标系根据以前的变化而变化.

在以下示例中,蓝色元素是伪元素,阴影是div元素:

  1. div {
  2. width: 40px; height: 40px;
  3. margin: 40px;
  4. Box-shadow: 0px 0px 10px 5px #000;
  5. animation: spinShadow 2s infinite;
  6. background-color: #000;
  7. }
  8. @keyframes spinShadow {
  9. to { transform: rotate(360deg); }
  10. }
  11. div:before {
  12. content: '';
  13. position: absolute;
  14. left:-5px; top:-5px;
  15. width: 50px; height: 50px;
  16. transform: rotate(0deg) translate(-10px,-10px) rotate(0deg);
  17. animation:inherit;
  18. animation-name: spinElt;
  19. background-color: #0bb;
  20. }
  21. @keyframes spinElt {
  22. to { transform: rotate(-360deg) translate(-10px,-10px) rotate(360deg); }
  23. }
  1. <div></div>

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

  1. transform: rotate(-360deg) translate(-10px,-10px) rotate(360deg)

旋转(-360deg)计数父对象的旋转,使伪元素静态.
> translate(-10px,-10px)将伪元素翻译成阴影偏移
旋转(360度),伪元素沿与父方向相同的方向旋转

  1. div {
  2. width: 40px; height: 40px;
  3. margin: 40px;
  4. Box-shadow: 0px 0px 10px 5px #000;
  5. animation: spinShadow 2s infinite;
  6. background-color: #000;
  7. }
  8. @keyframes spinShadow {
  9. to { transform: rotate(360deg); }
  10. }
  11. div:before {
  12. content: '';
  13. position: absolute;
  14. left:-5px; top:-5px;
  15. width: 50px; height: 50px;
  16. animation:inherit;
  17. background-color: #0bb;
  18. }
  19. #first:before{
  20. transform: rotate(0deg);
  21. animation-name: first;
  22. }
  23. @keyframes first {
  24. to { transform: rotate(-360deg); }
  25. }
  26. #second:before{
  27. transform: rotate(0deg) translate(-10px,-10px);
  28. animation-name: second;
  29. }
  30. @keyframes second {
  31. to { transform: rotate(-360deg) translate(-10px,-10px); }
  32. }
  33. #complete:before{
  34. transform: rotate(0deg) translate(-10px,-10px) rotate(0deg);
  35. animation-name: complete;
  36. }
  37. @keyframes complete {
  38. to { transform: rotate(-360deg) translate(-10px,-10px) rotate(360deg); }
  39. }
  1. <ol>
  2. <li>Counter rotate:<div id="first"></div></li>
  3. <li>Translate :<div id="second"></div></li>
  4. <li>Rotate:<div id="complete"></div></li>
  5. <ol>

猜你在找的HTML相关文章