用js写一个芝麻开门的效果要鼠标放上去门自动打开还会向里也转一个角度鼠标移开后门关闭

你可以使用JS动态修改门的transform属性来实现芝麻开门的效果。具体的代码如下：

<!-- 在HTML中添加一个门的元素 -->
<div id="door" class="door">
  <div class="door-front"></div>
  <div class="door-back"></div>
</div>

/* 定义门的样式 */
.door {
  position: relative;
  width: 200px;
  height: 300px;
  perspective: 800px;  /* 设置透视距离 */
}

.door-front,
.door-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  transform-origin: left center;  /* 设置旋转中心 */
  transition: transform 0.5s ease-in-out;  /* 设置过渡效果 */
}

.door-back {
  transform: rotateY(180deg);
}

// 获取门的元素
const door = document.querySelector('#door');
const front = door.querySelector('.door-front');
const back = door.querySelector('.door-back');

// 鼠标移入时打开门
door.addEventListener('mouseenter', () => {
  // 门向左旋转90度
  front.style.transform = 'rotateY(-90deg)';
  back.style.transform = 'rotateY(90deg)';
});

// 鼠标移出时关闭门
door.addEventListener('mouseleave', () => {
  // 门回到初始状态
  front.style.transform = 'rotateY(0)';
  back.style.transform = 'rotateY(180deg)';
});

上述代码中，我们首先使用CSS定义了门的样式，包括门的宽高、背景颜色、旋转中心和过渡效果等。门被分为前后两个面，通过`transform: rotateY(180deg)`将后面的门反转180度，使其看起来像是门的内部。

接着，我们使用JS获取门元素和前后两个面的元素，并为门添加了两个事件监听器，分别对应鼠标移入和移出时门的动作。当鼠标移入时，我们通过修改前后两个面的transform属性，将门向左旋转90度，从而实现门的打开效果。当鼠标移出时，我们将前后两个面的transform属性都恢复到初始状态，从而实现门的关闭效果。

需要注意的是，为了让门的旋转效果更加逼真，我们可以在CSS中使用`perspective`属性设置透视距离，使门在旋转的同时产生透视效果。