旋转div，然后延伸

Question

我试图在悬停时旋转一个div，然后将其右侧倾斜延伸。我在悬停时成功地扩展了div。

div{
height: 200px;
width: 200px;
background-color:wheat;
transition: .2s;
margin-top: 1em;
margin-left: 10em;
margin-bottom: 10em;
overflow: hidden;
}
div:after{
-webkit-transition: .2s;
transition: .2s;
content: '';
position: absolute;
top: 0;
left: 25%;
width: 0px;
height: 200px;
background: wheat;
overflow: hidden;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-35deg);
transform: skew(-35deg);
z-index: -1;
margin-left: 10em;
margin-top: 1em;
}
div:hover:after {
-webkit-transition: .2s;
transition: .2s;
width: 200px;
height: 200px;
background: wheat;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-35deg);
transform: skew(-35deg);
z-index: -1;
margin-top: 1em;
margin-left: 10em;
margin-bottom: 10em;
}

<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

但是，当我尝试使用transform: rotate(-45deg);旋转主div时，以下伪元素不会运行。有办法做到这一点吗？或者至少有一个javascript替代方案可以让整个过程变得更容易？

Answer 1

如果我正确理解你，你想要这样的

div{
height: 200px;
width: 200px;
background-color:wheat;
transition: .2s;
margin-top: 10em;
margin-left: 10em;
margin-bottom: 10em;
}
div:hover {
transform: rotate(-45deg);
}
div:after{
-webkit-transition: .2s;
transition: .2s;
content: '';
position: absolute;
top: 0;
left: 65%;
width: 0px;
height: 200px;
background: wheat;
overflow: hidden;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-35deg);
transform: skew(-35deg);
z-index: -1;
}
div:hover:after {
-webkit-transition: .2s;
transition: .2s;
width: 200px;
height: 200px;
background: wheat;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-35deg);
transform: skew(-35deg);
z-index: -1;
margin-left: 4em;
}

p {
margin: 0;
}

<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

Answer 2

div{
height: 200px;
width: 200px;
transition: .2s;
margin-top: 1em;
margin-left: 10em;
margin-bottom: 10em;
position: relative;
}
div:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: wheat;
z-index: -1;
transition: all 1s ease;
}
div:hover:before {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg) ;
transform: rotate(180deg);
transition: all 1s ease;

}

div::after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 0;
height: 0;
border-top: 200px solid wheat;
border-right: 200px solid transparent;
z-index: -2;
opacity: 0;
transition: all 300ms ease;
}
@keyframes example {
from {Opacity: 0;right: 0}
to {opacity: 1;right: -200px;}
}
div:hover::after {
animation-delay: 1s;
animation: example forwards;
animation-duration: 1s;
transition: all 300ms ease;
}

<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>

我更改了css之前和之后的内容，并使用了动画。

Answer 3

问题似乎是在div元素上设置了overflow:hidden，尽管为什么在没有旋转的情况下伪元素仍然可见对我来说有些神秘

div {
height: 200px;
width: 200px;
background-color: wheat;
transition: .2s;
margin-top: 1em;
margin-left: 10em;
margin-bottom: 10em;
position: relative;
}
div:hover {
transform: rotate(-60deg);
}
div:after {
transition: .2s;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: wheat;
transform-origin: 100% 0;
transform: skew(-0deg);
z-index: -1;
}
div:hover:after {
transform: skew(-35deg);
}

<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique dicta adipisci qui fugit, eum eaque dolorem accusamus natus animi nam, deleniti tempora fugiat iusto minima optio commodi laudantium veritatis quos.</p>
</div>