1.空间三维坐标:
在文中之前,先介绍空间三维坐标,其中的坐标轴以及正负方向如图所示:
2.不可缺少的perspective属性
perspective属性:规定3D元素的透视效果,决定了网页中的元素是2D的变换还是3D的变换,不定义该属性,便没有3D效果。css 3D transform的透视点是在浏览器的前方,需要设置该元素或者该元素的父元素的perspective大小
perspective的两种写法:
1.在父元素上设置perspective大小再在子元素上写transfrom属性:
2.在当前元素上,与transform的其他属性写在一起。
3.translate3d(x,y,z)
translate3d(x,y,z)定义3D平移,x,y,z分别对应x轴、y轴、z轴的平移。
或者translateX(x)、translateY(y),translateZ(z)。
起始样式:
<style>
#father{
width:300px;
height: 300px;
margin:100px auto;
background-color: #0a6cd6;
}
#son{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
transform 3d
</div>
</div>
向x,y,z轴各平移200px效果图:
其中translateZ能更好理解透视的位置。
在下面以translateZ为例来观察元素的3d变化:设置了父元素的perspctive为1000px:定义了视点离屏幕的距离。
#father{
width:300px;
height: 300px;
margin:100px auto;
background-color: #0a6cd6;
perspective: 1000px; //定义视点离屏幕的距离
}
#son{
width: 200px;
height: 200px;
background-color: pink;
transform: translateZ(100px);//向z轴平移100px
}
向z轴平移100px效果图:
向z轴平移200px效果图:
向z轴平移400px效果图:
向z轴平移999px效果图:
向z轴平移1000px效果图:
在没有rotate元素的作用下,只有translateZ,它的作用让元素在我们眼前近或者远。
结论
1.设置的translateZ值越小,则子元素越小,因为元素离我们的视线远去了,看到的就变小了;设置的Translate Z值越大,则子元素也越大。
2.但是当接近父元素设置的1000px时,子元素的大小就会占满整个屏幕;
3.当translateZ的值等于或者大于1000px时,该元素就看不见了。
4.rotate3d(x,y,z,angle)
rotate3d(x,y,z,angle)定义3d旋转,对应着分别沿x,y,z轴进行3D旋转。其中x,y,z的值是一个0~1之间的数值,主要用来描述元素分别围绕x,y,z轴旋转的矢量值。
也可以是rotateX(x),totateY(y),rotateZ(z),其中x,y,z为angle角度。
ransform: perspective(1000px) rotate3d(0.5,0.5,0.5,30deg);
效果图:
(1)rotateX(angle)绕X轴3d旋转:
围绕x轴3d旋转正值30°:
transform: perspective(1000px) rotateX(30deg);
围绕x轴3d旋转正值30°的效果图:(可以理解为:向里推)
围绕x轴3d旋转负值值30°:
transform: perspective(1000px) rotateX(-30deg);
围绕x轴3d旋转负值30°的效果图:(可以理解为:向外拉)
(2)rotateY(angle)绕y轴3d旋转:
围绕y轴3d旋转正值30°:
transform: perspective(1000px) rotateY(30deg);
围绕y轴3d旋转正值30°的效果图:(可以理解为:侧拉)
围绕y轴3d旋转负值的30°:
transform: perspective(1000px) rotateY(-30deg);
围绕y轴3d旋转负值的30°的效果图:(可以理解为:侧推)
(2)rotateZ(angle)绕z轴3d旋转:
围绕z轴3d旋转正值30°:
transform: perspective(1000px) rotateZ(30deg);
围绕z轴3d旋转正值30°的效果图:
围绕z轴3d旋转负值30°:
transform: perspective(1000px) rotateZ(-30deg);
围绕z轴3d旋转负值30°的效果图:
5.scale3d(x,y,z)
scale3d(x,y,z),scaleX(x),scaleY(y),scaleZ(z)定义3D缩放转换
值>1时放大,值<1时缩小,值=1为默认值。
transform: perspective(1000px) scale3d(2,1.5,1.5);
效果图:
transform: perspective(1000px) scaleZ(2);
效果图:
单独的scaleZ(z)不会有任何效果,需要与其他的函数进行结合。
6.backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。其值有visible|hidden。
visible:背面是可见的。hidden:背面是不可见的。
7.transform-style属性
用于设置元素的子元素是位于 3D 空间中还是平面中.
参数:
1.flat:默认值,表示平面的
2.preserve-3d:表示3D透视
8.perspective-origin属性
设置 3D 元素的基点位置。定义时的perspective -Origin属性,它是一个元素的子元素,透视图,而不是元素本身。
语法格式:perspective-origin: x-axis y-axis;
默认值为:perspective-origin:50% 50%;