2D,3D图形转换所用知识点

276 查看

在文档中建立桥套的 section>section>section 按tab
transform:改变、变化、转变 父元素发生变换时,子元素会随着变化

1. scale:缩放;(x,y);   (0.6)表示宽高都缩放0.6倍 小数的话,表示缩小 大于1的表示变大 若写一个值  默认另一个为1;
2.  translate:平移 (x,y)  transform: translate(100px,50px)           
3. skew,切变,倾斜,deg;角度;  transform: skew(5deg,0deg)   第一个值是向x轴的倾斜角度,(水平左上角向左动)第二个只是向y轴;(沿y轴向上移动);
4. rotate:旋转;默认是绕中心点旋转;  顺时针为正,逆时针为负*
5. 组合变换  : transform: rotate(45deg) scale(0.6)

  origin:起点,原点;变换的参考点,默认值是50% 50% 取值用百分比;

1.   transform-origin:100% 100% 

transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
2D

* translate  (平移 )
* rotate(旋转)
* scale(缩放)
* skew(切变,主要使图片变形)
* matrix(矩阵,复杂变换,包括实现以上几个标签的效果。)