css3系列之详解perspective

• 2019 年 10 月 3 日
• 筆記

perspective

????????????????????????????????????????????? perspective?800px   ??????????800px ??????????(??????????????)

(????????????????????)

????? ??perspective  ? ????????? ???????????????????????????? ??????????? ????????????

??????translateZ ???????????? translate Z???→ css3???transform??translate

?????????transform?translateZ  ??????  Z????? ??Z???????????????????????????  ?????????????????????? ??????????????????????????  ???????? perspective  ?? transform?translateZ  ??????? ??????(?????????perspective?800px?????? Z?800px ?????)

???????? 800px ???? ???????? ???800px???? ??????  ???????   ????????????????????????????????? ??????????????????????? ???????  ?800px ?????????? ??????? ??801px ?????????????????????

??transform?translateZ? ??????? ?????????????????? ???????

?????????? perspective ???????????????????????????????? perspective? ??????????????????? ?? ???????(translateZ ?????? perspective??? ? ????????????????????????translateZ(0px)????? perspective ????  )

?????????????  ??????????????????????? ???????????????????? translateZ(-100px) ??? ???(?????????????? Z??????????????????????????????????)  ????????? translateZ ?? ???Z ??-100px ?????perspective??????????(??????????????? ???????? ??????????)

???????????? ???????????? ?????????????????? ???????  

??????????????????????????????????????? ??????????????? ??????????

??????translateZ ??????????

??????translateZ ??????????

??????translateZ ?0???????????perspective ??????????????

?????????translateZ ???????? perspective ??????????? ??????

????????????perspective ????????????????????perspective-origin???????????????

?????????? center  center???? ???????????????????? 0px 0px ??????????center center???????????????? 50px  ??????? 50%?????? top right left bottom center ??

?????????? ????????? ?????????????????????? ?????????????????????????

??????????????????