旋转

时间:2016-01-30 13:13:02

标签: html css css3 css-animations css-transforms

给予,例如一个<div>一个盒子阴影以及旋转它会导致盒子阴影方向的旋转 - 当盒子阴影产生幻觉时会出现问题。

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

&#13;
&#13;
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;
}
&#13;
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box6"></div>
&#13;
&#13;
&#13;

box-shadow rotating with div

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

Shdaow direction is respected during rotation

如何旋转<div>并仍保持方框阴影方向相同?

解决方案应该是纯CSS ...

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

3 个答案:

答案 0 :(得分:23)

使用CSS变换,在旋转期间保持偏移框阴影的方向很简单。
这种方法依赖于transform origin与变换一起移动的事实。这意味着当在同一元素上设置多个变换时,每个变换的坐标系将根据先前的变换而变化。

在下面的示例中,blue元素是一个伪元素,shadow是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)
  1. rotate(-360deg)反对父项的旋转,使伪元素成为静态。
  2. translate(-10px, -10px)将伪元素转换为阴影偏移
  3. rotate(360deg)伪元素以与父
  4. 相同的方向旋转

    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>

答案 1 :(得分:8)

你也可以在动画帧中整合盒子阴影方向:

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>

答案 2 :(得分:0)

受其他答案的启发,我也创造了自己的答案: https://jsfiddle.net/zoxgbcrg/1/

&#13;
&#13;
.shadow {
  background-color: black !important;
  width: 40px;
  height: 40px;
  box-shadow: 0px 0px 10px 5px #000;
  margin-top: 35px;
  margin-left: 35px;
  position: absolute;
  z-index: -1;
}
&#13;
<div class="box1 shadow"></div><div class="box1"></div>
&#13;
&#13;
&#13;

诀窍还在于创建一个额外的<div>来处理阴影。就我而言,它不是:before,而是由margin移动的真实DOM元素。

注意:看起来今天(2016年1月31日)Firefox和Chrome有着微妙的渲染差异。因此,对于Firefox https://jsfiddle.net/zoxgbcrg/正在创建所需的结果,对于Chrome我建议https://jsfiddle.net/zoxgbcrg/1/