A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© zh930233132 初级黑马   /  2019-9-25 19:49  /  1599 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

3D移动 translate3d
transform:translate3d(x,y,z) ,translform:translateZ(100px) 仅仅是移动在Z轴上移动.往外正值,往里负值。
视距 perspective:近大远小,物体在z轴上移动,离眼睛越近看上去越大。这个值规定要设置给物体的父元素。

3D旋转 rotate3d
transform:rotateX(45deg):沿着x轴正方向旋转 45度
左手准则:
1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

3D呈现 transform-style
控制子元素是否开启三维立体环境
- transform-style: flat 子元素不开启3d立体空间  默认的   (flat:平的,平面)

- transform-style: preserve-3d; 子元素开启立体空间  (preserve:[prɪˈzɜ:v] 保持)

- 代码写给父级,但是影响的是子盒子

私有前缀


-moz-:代表 firefox 浏览器私有属性  (moz:Mozilla,firefox由Mozilla打造)

-ms-:代表 ie 浏览器私有属性 (ms:Microsoft)

-webkit-:代表 safari、chrome 私有属性 (这俩浏览器的内核为webkit)

-o-:代表 Opera 私有属性 (o:opear缩写)

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马