Css 延迟双变换

我有一个侧容器，我想在单击按钮时显示它。我想做的是首先使用

translateX

从侧面将其放入，然后当它移动到我希望的距离时，我希望它使用

skewX

稍微倾斜一点

但是，当我在单击按钮时使用CSS时，即当它出现时：

transform: translateX(0px) skewX(10deg);
transition: transform 0.2s ease-in;

它同时进行变换

然后，我可以通过使用CSS的

right

（这是一个固定元素）来解决这个问题：

right: 0;
transform: skewX(10deg);
transition-property: right, transform;
transition-delay: 0.0s, 0.1s;

---

我只是想知道，如果不使用

right

，也就是说，在转换之间进行延迟，是否可以单独使用transform来实现这一点。

嘿，可能不会直接实现，但通过嵌套元素可以实现相同的效果，如下所示：

HTML

    <div class="main">
      <div class="content"></div>
    </div>

Css

.main{
  width:200x;
  height: 200px;
  transform: translateX(-100%);
  transition-duration:.2s;
  transition-delay: 0;
  position:relative;
  }
.content{
  position:absolute;
  
  top:0;
  left:0;
  width: 100%;
  height:100%;
  transform:skewX(0deg);
  transition-duration:.2s;
  transition-delay: 1s;
  background:blue
  }
.main:hover {
transform: translateX(0);
}

.main:hover  .content {
  transform:skewX(10deg);
    }

HTML
Css
梅因先生{
宽度：200倍；
高度：200px；
转化：translateX（-100%）；
过渡持续时间：.2s；
过渡延迟：0；
位置：相对位置；
}
.内容{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
变换：skewX（0度）；
过渡持续时间：.2s；
过渡延迟：1s；
背景：蓝色
}
.main:悬停{
变换：translateX（0）；
}
.main:hover.content{
变换：斜交（10度）；
}

代码笔