diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2011-12-04 19:24:08 -0800 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2011-12-04 19:24:08 -0800 |
| commit | f9527d31b496b47ff8db0f6c9d79de150ce755bb (patch) | |
| tree | 9cd85b10bd7c24219910169e32d47b1eb40c9647 /css | |
| parent | 233160ff2325037a750cfc8153f5c82ac0811219 (diff) | |
| download | perl-software-in-gnu-guix-f9527d31b496b47ff8db0f6c9d79de150ce755bb.tar perl-software-in-gnu-guix-f9527d31b496b47ff8db0f6c9d79de150ce755bb.tar.gz | |
fix vertical slide transition and hit areas of rolling links
Diffstat (limited to 'css')
| -rw-r--r-- | css/main.css | 37 |
1 files changed, 23 insertions, 14 deletions
diff --git a/css/main.css b/css/main.css index bb6e183..83d53ba 100644 --- a/css/main.css +++ b/css/main.css @@ -138,27 +138,24 @@ h1 { transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } -#main section.past { +#main section.present { display: block; - opacity: 0; - - -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); - -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + position: absolute; + z-index: 10; } + /********************************************* * DEFAULT THEME *********************************************/ -#main section.present { +#main section.past { display: block; - position: absolute; - z-index: 10; - - -webkit-transform-style: flat; - -moz-transform-style: flat; - transform-style: flat; + opacity: 0; + + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } #main section.future { @@ -204,6 +201,17 @@ h1 { transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } +.concave #main section>section.past { + -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); + -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); + transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); +} +.concave #main section>section.future { + -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); + -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); + transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); +} + /********************************************* * LINEAR THEME @@ -433,7 +441,6 @@ img { } - /********************************************* * ROLLING LINKS *********************************************/ @@ -461,6 +468,8 @@ img { position: relative; padding: 0 2px; + pointer-events: none; + -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; transition: all 400ms ease; |