平行于 x 轴旋转按钮阴影答案

【问题标题】：Rotated button shadow paralel to the x-axis平行于 x 轴旋转按钮阴影
【发布时间】：2018-06-06 08:05:34
【问题描述】：

我创建了一个动画旋转按钮，我希望它有一个与 x 轴平行的阴影。现在影子没有了，你知道怎么做吗？谢谢你。这是现有按钮的 css 和带有“实时示例”的代码盘的链接。

.btnMail{
    border-radius: 4px;
    background-color: rgba(120, 0, 255, 0.8);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 30px;
    cursor: pointer;
    transform: rotate(-10deg);
   transform-origin: bottom left;
    box-shadow: 0 8px 6px -6px black;
}

https://codepen.io/hubkubas/pen/dmJjWB

【问题讨论】：

标签： css button shadow

【解决方案1】：

根据对您问题的理解，您可以通过将shadow-box 属性应用于伪元素来实现精美的 3D 外观阴影或自定义深度阴影，然后您可以进一步操作这些伪元素以获得所需的阴影。

这是一个快速修复，可能会显示您想要的阴影类型：

/* btn */

.btnMail{
  width: 65px;
  height: 60px;
  display: inline-block;
    border-radius: 4px;
    background-color: rgba(120, 0, 255, 0.8);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 30px;
    cursor: pointer;
    transform: rotate(-10deg);
   transform-origin: bottom left;
}


.btnMail:hover {
  transition: 0.30s;
  transform: rotate(0deg);
  box-shadow: 0px 8px 6px -6px black;
  background-color: rgba(255, 0, 54, 0.8);
}

.btnMail:active {
  box-shadow: 0 6px 6px -6px black;
  transition: 0.30s;
}

#shadow{
  z-index: -111;
  width: 65px;
  height: 50px;
  position: absolute;
  top: 17px;
  left: 5px;
  box-shadow: 0px 10px 16px -9px black;
}

<button class="btnMail shadow"><i class="fa fa-envelope"><a href="mailto:name@example.com"></a></i></button>
<div id="shadow">
</div>

（注意：我为阴影使用了单独的div 标签，因为您在按钮上应用的动画也会应用在阴影上）。

您可以在此link 上了解有关如何创建自定义阴影的更多信息。

【讨论】：