如何創建CSS3頁面卷曲效果？

Question

我正在嘗試使用CSS3創建頁面卷曲效果。 該效果應與此類似-

我試圖使其正常工作，但無法解決。

這是我的代碼沙發

.nav {
    width: 200px;
    background: #353942;
    height: 50px;
    position: relative;

}
.curl {
    width:70px;
    height:50px;
    position: absolute;
    top:0;
    right:0;
    background: linear-gradient(
      25deg, 
      #4c4c4c 0%,
      #474747 39%,
      #2c2c2c 50%,
      #000000 51%,
      #111111 60%,
      #2b2b2b 76%,
      #1c1c1c 91%,
      #131313 100%);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
    transition: all .5s ease;
}
.curl:before,
.curl:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 12.5%;
    bottom: 5.8%;
    width: 70%;
    max-width: 300px;
    max-height: 100px;
    height: 55%;
    box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
    transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
    left: auto;
    right: 5.8%;
    bottom: auto;
    top: 14.16%;
    transform: skew(-25deg) rotate(-84deg);
}

.curl:hover {
    width: 120px;
    height: 50px;
}
.curl:hover:before,
.curl:hover:after {
    box-shadow: 0 24px 30px rgba(0, 0, 0, 0.3);
}

這是JS BIN

有人可以告訴我如何解決嗎？

任何想法將不勝感激。

謝謝。

Answer 1

看一下這個。

.nav {
width: 200px;
background: #353942;
height: 50px;
position: relative;

}
 .curl {
width:120px;
height:120px;
position: absolute;
top:0;
left:0;
background : 
    linear-gradient(
        135deg, 
        #fff, 
        #f3f3f3 45%, 
        #ddd 50%, 
        #aaa 50%, 
        #bbb 56%, 
        #ccc 62%, 
        #f3f3f3 80%,
        #fff 100%
    );
box-shadow : 0 0 10px rgba(0, 0, 0, .5);
transition: all .5s ease;
}
.curl:before,
.curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12.5%;
bottom: 5.8%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
left: auto;
right: 5.8%;
bottom: auto;
top: 14.16%;
transform: skew(-15deg) rotate(-84deg);
}

.curl:hover {
width: 240px;
height: 240px;
}
.curl:hover:before,
.curl:hover:after {
box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}