主页 / 问题 / 646728
Accepted
Alexandr_TT
Asked:2020-03-31 20:05:14 +0000 UTC2020-03-31 20:05:14 +0000 UTC

如何在旋转主体时保持阴影的方向不变？

  • 772

例如，你div有一个矩形阴影。旋转矩形会旋转矩形阴影的方向，这会导致问题，因为矩形的阴影应该给出照明的错觉。

示例： jsfiddle

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...

@Chris旋转问题时 保持框阴影方向一致的松散翻译。

html

3 个回答

  1. 在旋转过程中保持阴影矩形的偏移方向一致是使用CSS-transforms.

    这种方法依赖于变换原点实际上被变换移动的事实。

    这意味着当在同一元素上设置多个变换时，每个变换的坐标系都会更改以匹配之前的坐标系。

    在下面的例子中，蓝色元素是一个伪元素，阴影是一个元素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)
    1. rotate(-360deg)- 父元素旋转计数器使伪元素静态
    2. translate (-10px, -10px)- 移动伪元素以使阴影偏移
    3. 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>

    来自 @web-tiki贡献者的答案的松散翻译 。

    • 7
  2. Best Answer

    我们将把正方形的大小和位置设置到父块中，让伪元素继承。让我们稍微移动“块阴影”，为其添加模糊（阴影模仿）并旋转伪元素。

    body {
  background-color: #8694ef;
}

.square {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 100px;
}

.square:before,
.square:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 20px;
  left: 20px;
  background-color: rgba(0,0,0,0.6);
  filter: blur(8px);
  animation: rotate linear 5s infinite;
}

.square:after {
  top: 0;
  left: 0;
  filter: none;
  background-color: #ccc;
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}
    <div class=square></div>

    • 5

  3. 您还可以在动画帧内整合矩形阴影的方向：

    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>

    来自成员 @G-Cyrillus的答案的松散翻译 。

    • 3

相关问题