使用CSs写一个容器分成四份，当鼠标划过手机时进行旋转、缩放、平移、倾斜

可以使用CSS3的transform属性来实现容器的旋转、缩放、平移、倾斜。以下是一个简单的实现：

HTML代码：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>

CSS代码：

.container {
  width: 400px;
  height: 400px;
  position: relative;
}
.item {
  width: 50%;
  height: 50%;
  position: absolute;
  transition: all 0.5s ease-in-out;
}
.item1 {
  background-color: red;
  top: 0;
  left: 0;
  transform: translateX(-50%) translateY(-50%) rotateX(0) rotateY(0) scale(1);
}
.item2 {
  background-color: blue;
  top: 0;
  right: 0;
  transform: translateX(50%) translateY(-50%) rotateX(0) rotateY(0) scale(1);
}
.item3 {
  background-color: green;
  bottom: 0;
  left: 0;
  transform: translateX(-50%) translateY(50%) rotateX(0) rotateY(0) scale(1);
}
.item4 {
  background-color: yellow;
  bottom: 0;
  right: 0;
  transform: translateX(50%) translateY(50%) rotateX(0) rotateY(0) scale(1);
}

/* 鼠标悬停时的效果 */
.item:hover {
  transform: translateX(-50%) translateY(-50%) rotateX(20deg) rotateY(20deg) scale(1.2);
}
.item:hover + .item {
  transform: translateX(50%) translateY(-50%) rotateX(20deg) rotateY(-20deg) scale(1.2);
}
.item:hover + .item + .item {
  transform: translateX(-50%) translateY(50%) rotateX(-20deg) rotateY(20deg) scale(1.2);
}
.item:hover + .item + .item + .item {
  transform: translateX(50%) translateY(50%) rotateX(-20deg) rotateY(-20deg) scale(1.2);
}

解释一下代码：

1. HTML中包含一个父容器和四个子容器，子容器使用类名item1、item2、item3、item4来区分。

2. CSS中，父容器设置了宽度和高度，并且使用了相对定位。

3. 子容器设置了宽度和高度为50%，并且使用了绝对定位。每个子容器的位置和变换属性都不同。

4. 使用transform属性实现子容器的旋转、缩放、平移、倾斜效果。注意，每个子容器都有自己的变换属性。

5. 使用:hover伪类来实现鼠标悬停时的效果。当鼠标悬停在某个子容器上时，该子容器以中心点为旋转中心，绕X轴和Y轴旋转20度，同时缩放1.2倍。其他子容器也会按照一定的规律进行旋转、缩放、平移、倾斜。