html - Codepen预览未在Facebook上显示旋转

Question

我试图将我的Codepen CSS绘图链接到Facebook（和其他社交媒体网站）上，并且预览不使用旋转属性更新。我同时添加了普通转换和webkit转换。但是，这是我的预览。



这是codepen的链接：https://codepen.io/evasamsonoff/pen/WKPwoN

下面是实际的代码：

body {
  background: black;
}

#main {
  width: 450px;
  height: 600px;
  background: #EFECE1;
  margin: 0 auto;
  position: relative;
  top: 30px;
}


#half_circle {
  border: 45px solid #B42524;
  width: 330px;
  height: 280px;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 20px;
}


#half_circle::after {
  content: "";
  position: absolute;
  background: #EFECE1;
  width: 300px;
  height: 100px;
  top: 230px;
  left: 70px;
}
#half_circle::before {
  content: "";
  background: #EFECE1;
  position: absolute;
  width: 120px;
  height: 450px;
  left: 260px;
  top: -30px;

}

#vertical {
  background: #B42524;
  width: 25px;
  height: 260px;
  position: absolute;
  top: 310px;
  left: 140px;
}

#column {
  position: absolute;
  width: 120px;
  height: 400px;
  top: 110px;
  left: 180px;
  display: flex;
  flex-direction: row;
  border-top: 10px solid #B42524;
  border-bottom: 10px solid #B42524;
  justify-content: center;

}

#column>div {
  background: #B42524;
  width: 25px;
  margin-left: 4px;
  margin-right:4px;
  margin-top: 8px;
  margin-bottom: 8px;
}

#lower {
  height: 150px;
  display: grid;
  grid-template-columns: 150px 70px;
  grid-template-rows: 30px 30px 30px ;
  grid-column-gap: 30px;
  grid-row-gap: 10px;
  padding-left: 5px;
  padding-right: 5px;
  border-left: 6px solid black;
  border-right: 6px solid black;
  position: relative;
  top: 15px;
  align-content: center;


}

#lower::before {
  content: "";
  background: black;
  width: 18px;
  height: 420px;
  position: absolute;
  left: 160px;
  top: -10px;
}

#lower::after {
  content: "";
  background: black;
  position: absolute;
  width: 23px;
  height: 8px;
  top: -105px;
  left: 163px;
}

#upper {
  width: 190px;
  height: 80px;
  position: relative;
  left: 65px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  justify-content: center;
  -webkit-clip-path: polygon(42% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(42% 0, 100% 0, 100% 100%, 0% 100%);

}

#upper>div {
  background: black;
  height: 20px;
  margin: 1px;
}
#lower>div {
  background: black;
}

#hammer {
  top: 90px;
  left: 120px;
  position: absolute;
  transform: rotate(29deg);
  -webkit-transform: rotate(29deg);

}

和HTML

<div id="main">
  <div id="sickle">
    <div id="half_circle"></div>
    <div id="vertical"></div>
  </div>

  <div id="column">
    <div id="column_1"></div>
    <div id="column_2"></div>
    <div id="column_3"></div>
  </div>

  <div id="hammer">
    <div id="upper">
      <div id="1"></div>
      <div id="2"></div>
      <div id="3"></div>
      <div id="4"></div>

    </div>
    <div id="lower">
      <div id="5"></div>
      <div id="6"></div>

      <div id="7"></div>

      <div id="8"></div>
      <div id="9"></div>
      <div id="10"></div>

    </div>
  </div>

</div>

如您所见，实际的Codepen旋转了锤子。即使将笔复制到新笔中并重新加载页面，并清理了浏览器缓存，我的预览（在所有社交媒体链接和预览上）都没有。

Answer 1

好吧，我尝试将其发布在我的Twitter和Facebook帐户上，并且可以正常工作（锤子旋转了），您是否尝试过将其发布在其他浏览器上？
Screen from Twitter，Screen from Facebook