Jquery CSS-倒角方形和转角

我需要帮助编辑CSS方块，如下所示。请提供有关如何组合变换倾斜和旋转的建议

发件人：

至：

我的atempt：

---

谢谢

让我们考虑一下你需要做什么：

• 旋转（Z轴）-很明显，您的正方形以45°角旋转，因此我们需要处理此问题。这是最容易注意到的角度
• 旋转（X轴）-很难辨别向后旋转所需的确切角度，因此可能需要获得正确的角度

应用变换

话虽如此，您可以将

transform

属性与相应的浏览器实现一起使用，以获得如下内容：

.special-rotate {
    -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
}

这将为您提供如下示例所示的内容，这将使您能够准确地确定要查找的值：

#正方形{
保证金：0自动；
高度：200px；
宽度：200px；
背景：红色；
-ms变换：rotateX（45度）rotateY（0度）rotateZ（45度）；
-webkit变换：rotateX（45度）rotateY（0度）rotateZ（45度）；
变换：rotateX（45度）rotateY（0度）rotateZ（45度）；
}

---

oki，我在这里试过了，非常感谢，但不幸的是，倾斜后的长度只有140px，而不是200px（您还可以查看仅在特定轴上执行倾斜（例如，

skewX（…）

，

skewZ（…）

，等等）。我强烈建议您使用前面提供的“游乐场”链接，您也可以查看。

.special-rotate {
    -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    -webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
}