# UI that looks like turning a page

**URL:** <https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518>\
**Category:** Project Showcase\
**Created:** [February 10, 2021, 1:10am UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518 "2021-02-10T01:10:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 10, 2021, 1:10am UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518/1 "2021-02-10T01:10:25Z")

</div>

Added a page-turning UI.

> **[E-Book-ver.2](https://average-activity-125.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![McJagger](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mcjagger/32/18616_2.png) [@McJagger](https://community.glideapps.com/u/McJagger)\
**Post date:** [February 10, 2021, 2:41am UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518/2 "2021-02-10T02:41:57Z")

</div>

Nice work!

---

<div class="post-metadata">

**Author:** ![ThatGuyInArizona](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thatguyinarizona/32/12472_2.png) [@ThatGuyInArizona](https://community.glideapps.com/u/ThatGuyInArizona)\
**Post date:** [February 10, 2021, 5:05pm UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518/3 "2021-02-10T17:05:59Z")

</div>

Very interesting- how did you do that ?

---

<div class="post-metadata">

**Author:** ![AymenM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymenm/32/21370_2.png) [@AymenM](https://community.glideapps.com/u/AymenM)\
**Post date:** [February 10, 2021, 5:10pm UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518/4 "2021-02-10T17:10:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jaybird\_Farrow](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jaybird_farrow/32/135_2.png) [@Jaybird\_Farrow](https://community.glideapps.com/u/Jaybird_Farrow)\
**Post date:** [February 10, 2021, 5:14pm UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518/5 "2021-02-10T17:14:57Z")

</div>

beautiful

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 11, 2021, 2:07am UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518/6 "2021-02-11T02:07:30Z")

</div>

★ 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 ;
}
```

---

<div class="post-metadata">

**Author:** ![Carlos\_DeSilva](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carlos_desilva/32/19965_2.png) [@Carlos\_DeSilva](https://community.glideapps.com/u/Carlos_DeSilva)\
**Post date:** [February 11, 2021, 2:54am UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518/7 "2021-02-11T02:54:02Z")

</div>

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. 🤔 I’m(we’re) hoping you’ll share this with us. If this is proprietary, then I understand.

---

<div class="post-metadata">

**Author:** ![Jaybird\_Farrow](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jaybird_farrow/32/135_2.png) [@Jaybird\_Farrow](https://community.glideapps.com/u/Jaybird_Farrow)\
**Post date:** [February 16, 2021, 5:31pm UTC](https://community.glideapps.com/t/ui-that-looks-like-turning-a-page/22518/8 "2021-02-16T17:31:36Z")

</div>

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