mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-10-18 13:41:47 +00:00
114 lines
2.1 KiB
Sass
114 lines
2.1 KiB
Sass
|
// 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
|