css transform:rotate 加贝塞尔曲线

可以使用 CSS 的 `transform` 和 `border-image` 属性来实现旋转后带有贝塞尔曲线边框的效果。具体实现步骤如下：

1. 使用贝塞尔曲线工具生成贝塞尔曲线代码。

2. 在 CSS 中定义 `border-image` 属性，其中 `source` 属性为一个图片，可以使用 `linear-gradient` 来生成渐变色的图片，`slice` 属性设置图片的边缘大小，`width` 和 `outset` 属性设置边框宽度和边框外延。

举例：

border-image: url(linear-gradient(to right, #f00, #00f)) 30 30 30 30 round;

其中，`30 30 30 30` 表示边框外延大小，`round` 表示使用圆角来填充边框。

3. 将 `border-image-slice` 属性设置为生成的贝塞尔曲线代码。

举例：

border-image-slice: 1 fill;
border-image-source: url(linear-gradient(to right, #f00, #00f));

其中，`1` 表示图片边缘大小，`fill` 表示使用贝塞尔曲线来填充边框。

4. 使用 `transform` 属性来旋转元素，并将 `transform-origin` 属性设置为元素中心点。

举例：

transform: rotate(45deg);
transform-origin: center;

完整代码如下：

div {
  width: 200px;
  height: 200px;
  border: 30px solid;
  border-image: url(linear-gradient(to right, #f00, #00f)) 30 30 30 30 round;
  border-image-slice: 1 fill;
  border-image-source: url(linear-gradient(to right, #f00, #00f));
  transform: rotate(45deg);
  transform-origin: center;
}