你给我的代码我运行不起来，你自己去找一个测试网站测试一下

很抱歉，我可能理解错误了您的问题。以下是一个基于您的要求的CSS示例代码，您可以在CSS测试网站上运行它来查看效果。

HTML代码：

<div class="container">
  <div class="cube1"></div>
  <div class="cube2"></div>
  <div class="joint"></div>
</div>

CSS代码：

.container {
  position: relative;
  width: 300px;
  height: 300px;
  perspective: 800px;
}

.cube1, .cube2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

.cube1 {
  transform: rotateY(45deg) rotateX(-45deg);
}

.cube2 {
  transform: rotateY(135deg) rotateX(-45deg);
  top: 100px;
}

.joint {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #3498db;
  transform-origin: center;
  top: 90px;
  left: 140px;
  transition: transform 0.5s ease-in-out;
}

.container:hover .joint {
  transform: rotateZ(90deg);
}

.container:hover .cube1 {
  transform: rotateY(45deg) rotateX(-45deg) rotateZ(90deg);
}

.container:hover .cube2 {
  transform: rotateY(135deg) rotateX(-45deg) rotateZ(90deg);
}

您可以将以上代码复制到CSS测试网站（如CodePen、JSFiddle等）中运行，并查看效果。如果您在实际应用中遇到了问题，可以随时向我提问，我会尽力为您解答。