web前端学习

概述

3D变形是CSS3新增的样式，可以实现元素在三维空间的多种变形。

属性值	释义
none	无2D转换
translate3d()	实现3D转换的元素水平、垂直及垂直屏幕三个方向的偏移
scale3d()	实现3D转换的元素水平、垂直及垂直屏幕三个方向的缩放比例
rotate3d()	前3个值表示绕X轴、Y轴、Z轴旋转矢量值

1.3D移动translate

属性名称：transform。属性的值：translate3d(水平方向偏移距离,垂直方向偏移距离,垂直于屏幕方向偏移距离)； translateX(水平方向偏移距离)； translateY(垂直方向偏移距离)； translateZ(垂直于屏幕方向偏移距离)。属性作用：实现3D转换的元素水平、垂直及垂直屏幕三个方向的偏移，其中水平和垂直方向同2D转换。垂直于屏幕方向偏移距离的视觉效果由透视距离和透视中心决定。

	
.threeD_father_class:hover>#threeD_test1{
	transform: translate3d(100px,25px,50px);
}

2.3D缩放scale

属性名称：transform。属性的值：scale3d(水平方向缩放比例,垂直方向缩放比例,垂直于屏幕方向缩放比例)； scaleX(水平方向缩放比例)； scaleY(垂直方向缩放比例)； scaleZ(垂直于屏幕方向缩放比例)。属性作用：实现3D转换的元素水平、垂直及垂直屏幕三个方向的缩放比例。其中水平和垂直方向同2D转换；垂直方向因为视觉角度，不能看出缩放效果。

	
.threeD_father_class:hover>#threeD_test2{
	transform: scale3d(4,2,8);
}

3.3D旋转rotate

属性名称：transform。属性的值：rotate3d(x,y,z,angle)。前3个值表示绕X轴、Y轴、Z轴旋转矢量值。例如，“1,0,1,30deg”表示绕X轴和Z轴旋转30º。 x<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 X 坐标方向的矢量。 y<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Y 坐标方向的矢量。 z<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Z 坐标方向的矢量。 a <angle> 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

	
.threeD_father_class:hover>#threeD_test3{
	transform: rotate3d(1,1,1,180deg);
}

4.3D透视距离perspective

属性名称：perspective。属性作用：设置3D透视距离，单位一般为px。进行3D转换元素的父元素具有该属性，才能在视觉上更直观地感受到3D转换。

	
#threeD_test_father2{
	perspective: 100px;
}
.threeD_father_class:hover>#threeD_test4{
	transform: rotate3d(1,1,1,180deg);
}

5.透视中心perspective-origin

属性名称：perspective-origin。属性作用：定义3D元素的透视中心位置。应用格式： perspective-origin:x-axis y-axis; perspective-origin属性的默认值为“50% 50%”。该属性必须与perspective属性一同使用，而且只影响3D转换元素。

	
#threeD_test_father3{
	perspective: 100px;
	perspective-origin: 0% 0%;
}
.threeD_father_class:hover>#threeD_test5{
	transform: rotate3d(1,1,1,180deg);
}

6.转换一起使用

参数作用：定义缩放、旋转、倾斜的基点。应用格式：选择器{transform-origin:X,Y;} （1）X、Y默认值均为50%。（2）X的值可以是left、right、center、长度和百分比。（3）Y的值可以是top、bottom、center、长度和百分比。

	
#threeD_test_father3{
	perspective: 100px;
	perspective-origin: 0% 0%;
}
.threeD_father_class:hover>#threeD_test6{
	transform: translate3d(100px,25px,50px) scale3d(4,2,8) rotate3d(1,1,1,180deg); */
}