| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- // tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
- .perspective
- position: relative
- width: 100%
- height: 100%
- overflow: hidden
- &--modalview
- position: fixed
- perspective: 1500px
- .container
- position: relative
- transform: translateZ(0) translateX(0) rotateY(0deg)
- min-height: 100%
- outline: 30px solid $highlight
- transition: transform .4s
- .modalview
- .container
- position: absolute
- width: 100%
- height: 100%
- overflow: hidden
- backface-visibility: hidden
- .effect-rotate-left
- .container
- transform-origin: 0% 50%
- transition: transform .4s
- &--animate
- .container
- transform: translateZ(-1800px) translateX(-50%) rotateY(45deg)
- outline: 30px solid $highlight
- .outer-nav
- position: absolute
- top: 50%
- left: 55%
- transform: translateY(-50%)
- transform-style: preserve-3d
- margin: 0
- padding: 0
- list-style: none
- text-align: center
- visibility: hidden
- transition: visibility 0s .2s
- &.is-vis
- visibility: visible
- &--return
- position: absolute
- top: 0
- left: 0
- width: 100%
- height: 100%
- display: none
- cursor: pointer
- z-index: 11
- &.is-vis
- display: block
- & > li
- transform-style: preserve-3d
- transform: translateX(350px) translateZ(-1000px)
- font-size: 55px
- font-weight: 900
- opacity: 0
- cursor: pointer
- transition: transform .2s, opacity .2s
- &.is-vis
- transform: translateX(0) translateZ(0)
- opacity: 1
- transition: transform .4s, opacity .4s
- &::before
- content: ""
- position: absolute
- top: 50%
- left: 50%
- transform: translate(-50%, -25%)
- width: 110%
- height: 15px
- opacity: 0
- background-color: $highlight
- &.is-active::before
- opacity: 1
- @media (max-width: 767px)
- font-size: 44px
- @media (max-width: 600px)
- font-size: 34px
- li.is-vis:nth-child(2)
- transition-delay: .04s
- li.is-vis:nth-child(3)
- transition-delay: .08s
- li.is-vis:nth-child(4)
- transition-delay: .12s
- li.is-vis:nth-child(5)
- transition-delay: .16s
|
