css3变形基础

一、css3变形

语法：transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);

1.rotate(旋转)

a) rotateX(180deg) 沿x轴旋转180度 等价于 rotate3d(1,0,0,180deg)

b) rotateY(180deg) 沿y轴旋转180度 等价于 rotate3d(0,1,0,180deg)

c) rotateZ(180deg) 沿z轴旋转180度 等价于 rotate3d(0,0,1,180deg)

d) rotate(90deg) 不指定轴，默认在2d平面内旋转，正值顺时针，负值逆时针

注：旋转的单位为deg

2.scale(缩放)

a) scaleX(1.5)

沿x轴缩放，默认值为1，大于1时放大，小于1时缩小，当设置为0时，类似于隐藏

当设置负值时，翻转加缩放

b) scaleY(.5) 沿y轴缩放

c) scaleZ(1.5) 沿z轴缩放

d) scale(1.5) 不指定轴时，x轴和y轴同时缩放

3.skew(倾斜)

a) skewX(30deg) 沿x轴倾斜

b) skewY(-30deg) 沿y轴倾斜

c) skew(30deg) 不指定轴时，只写一个值，沿x轴倾斜

d) skew(30deg,30deg) x轴和y轴同时倾斜

skewX(30deg) skewY(30deg) x轴和y轴同时倾斜

注：倾斜单位为deg

4.translate(位移)

a) translateX(100px) 沿x轴位移，向右为正，向左为负

b) translateY(-100px) 沿y轴位移，向下为正，向上为负

c) translateZ(100px) 沿z轴位移，向前为正，向后为负

d) translate(100px) 不指定轴，设置一个值时，沿x轴位移

e) translateX(100px) translateY(100px) 沿x轴和y轴同时位移

二、改变变形元素的中心点位置

语法： transform-origin:left|center|right|数值 top|center|bottom|数值;

---

★ 使用css3变形的方式实现未知大小的元素在屏幕窗口水平垂直都居中

元素

{
	position:fixed;
	left:50%;
	top:50%;
	transform:translateX(-50%) translateY(-50%);
}

★ 使用css3变形的方式实现未知大小的子元素在父元素中水平垂直都居中

父元素{position:relative;}

子元素

{
    position:absolute; 
    left:50%; 
    top:50%; 
    transform:translate(-50%,-50%);
}

---

三、变形综合

我们可以将多种变形方式综合在一起使用，顺序不同，效果有可能不同

eg1: transform:rotate(360deg) scale(1.5);
transform:scale(1.5) rotate(360deg);

顺序不同，效果相同

eg2: transform:rotate(360deg) translateX(100px);
transform:translateX(100px) rotate(360deg);

顺序不同，效果不同

四、设置元素变形的类型

语法: transform-style:flat(2d)|preserve-3d(3d空间变形);

五、3d透视，井深

语法：perspective:数值+单位;

eg: 父元素{perspective:1000px;}

eg: 子元素{transform:perspective(500px) rotateY(45deg);}

六、opacity和rgba的区别

a) opacity是给整个容器去添加一定的透明度，容器中的文本图片都会跟随透明

b) rgba模式是给背景添加一定的透明度，文本和图片不会跟随透明

语法： background:rgba(0,0,0,0.6);

注：a代表透明度，取值范围0~1