CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

下面是详细讲解“CSS3 菱形拼图实现只旋转div 背景图片不旋转功能”的完整攻略。

1. 制作菱形拼图

这里我们采用比较简单的方式制作菱形拼图，就是把一个正方形旋转45度，然后截取四个角形来制作。代码如下：

.diamond {
  width: 200px;
  height: 200px;
  margin: 50px;
  background-color: #ccc;
  transform: rotate(45deg);
  overflow: hidden;
  position: relative;
}

.diamond:before {
  content: "";
  position: absolute;
  width: 141.42px;
  height: 141.42px;
  top: 29.29px;
  left: 29.29px;
  background-color: #f00;
  transform: rotate(-45deg);
}

这里我们使用 :before 伪元素来创建一个在菱形中间的小正方形，并使用 transform 旋转来让它的边缘正好贴合菱形边缘。

2. 只旋转div而不旋转背景图片

我们可以通过把菱形和背景图片分别放到不同的元素中来实现这个功能。具体步骤如下：

1. 创建一个菱形的元素，并将它的背景颜色设置为透明：

```css
.diamond-container {
width: 200px;
height: 200px;
margin: 50px;
overflow: hidden;
position: relative;
}

.diamond {
width: 200px;
height: 200px;
background-color: transparent;
transform: rotate(45deg);
overflow: hidden;
position: absolute;
left: 0;
top: 0;
}
```

1. 在菱形外部再创建一个元素，作为整个容器，并将它的位置设置为相对：

css
.diamond-container {
position: relative;
}

1. 在容器中创建一个子元素，用于显示背景图片：

css
.diamond-bg {
width: 100%;
height: 100%;
background-image: url(https://example.com/bg.png);
background-size: cover;
position: absolute;
left: 0;
top: 0;
}

1. 最后，将菱形和背景元素放置在容器中：

```html

```

现在，我们只需要对菱形进行旋转即可，背景图片不会跟着旋转而变形了。效果如下：

.diamond {
  transform: rotate(30deg);
}

示例说明

下面是两个具体的示例，可以帮助更加清晰地理解这个功能。

示例1：菱形背景和图片分离

首先，我们将菱形和背景图片分别放在两个元素中，代码如下：

<div class="diamond-container">
  <div class="diamond"></div>
  <div class="diamond-bg"></div>
</div>

.diamond-container {
  position: relative;
}

.diamond {
  width: 200px;
  height: 200px;
  background-color: transparent;
  transform: rotate(45deg);
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

.diamond-bg {
  width: 100%;
  height: 100%;
  background-image: url(https://example.com/bg.png);
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}

现在，只需要对菱形进行旋转：

.diamond {
  transform: rotate(30deg);
}

这样背景图片就不会跟着旋转而发生变形了。

示例2：菱形背景和图片合并

如果我们想将菱形和背景图片合并在一起，也可以通过设置伪元素的背景图片来实现。具体代码如下：

<div class="diamond-container">
  <div class="diamond"></div>
</div>

.diamond-container {
  width: 200px;
  height: 200px;
  margin: 50px;
  overflow: hidden;
  position: relative;
}

.diamond {
  width: 200px;
  height: 200px;
  background-color: transparent;
  transform: rotate(45deg);
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;

  /* 添加伪元素 */
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://example.com/bg.png);
  background-size: cover;
  top: 0;
  left: 0;
  z-index: -1;
}

注意：需要将伪元素的 z-index 设置为 -1，否则它会覆盖在菱形上面。

现在我们对菱形元素进行旋转，背景图片不会跟着旋转而变形了：

.diamond {
  transform: rotate(-30deg);
}