问题描述
我有一个要在单击按钮时显示的侧面容器。我想做的是首先使用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，即在变换之间进行延迟。
解决方法
可能不是直接的，但是通过嵌套以下元素可以实现相同的效果：
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);
}