UI that looks like turning a page

Project Showcase
1

Added a page-turning UI.

12 Likes
2

Nice work!

1 Like
3

Very interesting- how did you do that ?

1 Like
4

Hey !

That looks good ! I love the way the animation displays. Would you mind showing us the way you did it ?

Pretty sure the community will like it.

3 Likes
5

beautiful

6

★ The CSS of the animation is as follows.
★ Paste this CSS into rich text.
★ The animation may entertain you for a moment.

<div id="main">
<div id="content"><hr><br>Express flip animation with CSS.<br>
★ The animation moves when the screen is opened.<br>
★ It is necessary to build a separate mechanism for the page transition function. <br><br><hr>
</div>
</div>
<pre><span><style>
#main {
        width: 100%;
        height: 400px;
        background: #fff;
        box-shadow: 0px 0px 13px #ccc;
        animation: moveimg 1s ; 
        transform-origin: left center;
}
@keyframes moveimg {  
    10% {transform: perspective(80px)
    scaleZ(-0.2) rotateY(-70deg); }
}
#content {
        font-family: 'Noto Serif JP', serif;
        font-size: 0.95rem;
        line-height: 1.45rem;
        padding: 60px 50px 0px 50px ;
}
7 Likes
7

This is well executed. I played with your syntax and tweaked it to my liking for a project I’m working on.

I just wish I could figure out how you did the separate mechanism for the page transition. :thinking: I’m(we’re) hoping you’ll share this with us. If this is proprietary, then I understand.

4 Likes
8

can you share how the page transition function operates? thank you…

2 Likes