? ?? ?? CSS3?? ???? ?? ???? ???? ??? ?????. ??? ? ??? ?? ???? ???????.

??? github?? iscroll ??? ?? ?????. ??? ?? ??? ????? ?? ??? ???? ???? ? ??? ? ???(??? ? ??[??? ??]? ? ? ???? ??? ??). ?? ?? ? ? ???? ?? ?? ??? ???? ?? ?? ?? ??????. ?? ?? CCS3 ???? ??? ?? ??????. ??? ?? ??? ? ? ??? ?? iscroll? Github ??? ???????: https://github.com/issaxite/iscroll

CSS3 ?? ??

??? ?? ?? CSS3 ????? (???? ?? ??) ????) )? ????? ?? ????? ??? ??? ???? ?????. ?? ?? ??? ???? ??? ?? ?? ??? ?????. ?? ??, ??? ? ???(?: ?? ??? ?? ??)? ??? ?????? Android ????? ???? ???? ??? ????. ???? ????? ??? ??? ???? ?????? ???? ??? ???? ?? ???? ????. . ???? ??? ? ??? ??? ? ??? ??? ??????. ??? ???? ??? ??????? ????(??? ??? ??? ????). ???? ??? ???? ??? ???????(??? ? ?? ?? ??? ?? ????). gag) ) ??? ?? ???? ???? ???? GPU? ???? GPU ??? ???? GPU? ??? ??? ????? ????? ???? ????.

?:

CSS ?????, ?? ? ??? GPU ??? ???? ????? ??? ????? ?? ????? ??? ??? ?? ?????. ??? ?? ?? ???? ??? ?? ? ?? ????. ???? GPU ??? ??? ??? ? ????? ?? ????? ?? ??? CSS ??? ?????.

Chrome, FireFox, Safari, IE9+ ? ?? ??? Opera? ?? ???? ??? ?????. ?? CSS ??? ???? DOM ??? ???? ?? ???? ?? ??? ??? 3D???. ??? ??.

?? ??? GPU ??? ??? ? ?? ?? 3D ??? ????.

.isaax{
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

iscroll ???? ? ??? ??? ????.

.isaax {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

? ???? ???? ????? ???. ???? ?? ? "???? ???? ??? ?? ? ????"?? ??? ?????. ?? ?? ?????. ????? ?? ?? ? ??? ?????.

?? 1

.isaax {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}

• backface-visibility (ie10+) ??? ??? ??? ??? ? ???? TranslateZ ??? ?????? ;

• ??? ??? ?? ?? ??? ???? ?? ?? ??? ?? ??? ????.

?, ???? ??? ?? ??? ???? ??? ???? [?? ????? ? ?? ???]

?? 2

?? ????? ? ?? ??? ???? ?????:

.isaax {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

???? ??? ??

???? ?? ?? ?? ?? ?? ?????? ???? ?? ??????. ? ???? ??? ?? ???? ?? ? ???? ????. ????. ??? ?? ?? ?? ? ?? ?? ?? ??? ?????. ??? ??? ????? ??? ??? ??? ??? ?? ?? ? ?? ?? ??? ?? ???? ?????. . .

?? ?? [?? ???] ??? ?? ??? ?? ??? ?? ????????. ? ???? ??? ??? ?? ??? ? ????.

?? ??

??? ??? ??? ?????. , ??? ??? ??? ?????? ?? ?? ? ????. ??

: ????? ??? ????? ?? 3D ???? ??? ??? ? z-? ???? ?? ?? ????. ??? ?? index ??? ????? ???? ?? ???? ??? ????? ?? ? ??? Chrome? ??? ??? ????? ?? ???? ?? ???? ???? ??? ??? ??? ?? ?????.

.isaax{
  position: relative;
  z-index: 1;  // 可以設大點，盡量設得比后面元素的z-index值高
}

? ??? ??? ??? ??? ??? ????. ? ?? ?? ??? PHP ??? ????? ??????!

?? ?? ??:

? ??? CSS3?? ???? ??? ? ?? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!