xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix vertical slide transition and hit areas of rolling links

Browse Source
This commit is contained in:
Hakim El Hattab
2011-12-04 19:24:08 -08:00
parent 233160ff23
commit f9527d31b4
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
css/main.css
View File

@ -138,6 +138,17 @@ h1 {
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
#main section.present {
display: block;
position: absolute;
z-index: 10;
}
/*********************************************
* DEFAULT THEME
*********************************************/
#main section.past {
display: block;
opacity: 0;
@ -147,20 +158,6 @@ h1 {
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
/*********************************************
* DEFAULT THEME
*********************************************/
#main section.present {
display: block;
position: absolute;
z-index: 10;
-webkit-transform-style: flat;
-moz-transform-style: flat;
transform-style: flat;
}
#main section.future {
display: block;
opacity: 0;
@ -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;