transform 平移、旋转、放缩 2D 3D

transform 平移 旋转 放缩

默认是2D 只有宽高,没有厚度,所有子元素都是2D

//多个参数同时修改,空格隔开,不能写多个transform
//rotate 旋转之后 坐标轴也会跟着旋转
//scale 如果竖直和水平放缩比例相同,可以只写一个参数

transform:rotate(45deg) translate(100px,0) scale(1.2,0.5)

//旋转的点可以自定义,px 百分比 bottom 等三种
transform:rotate(45deg);
transform-origin:50% 40%;

//rotate 默认是根据Z轴旋转,可以自己修改为 rotateX rotateY rotateZ

//旋转的时候 透视效果(近大远小):此属性一定要写在父视图及以上
perspective:500px;

3D效果

//有 宽高 厚,设置之后,所有子元素都是3D效果了,但是并不是所有的浏览器都支持3D
transform-style: preserve-3d;
css
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。