(一 ) 3D transform中有三个方法
1、rotateX(45deg);
2、rotateY(45deg);
3、rotateZ(45deg);
(二) perspective属性
perspective的中文意思是透视,视角!
1、我们都知道近大远小的道理,对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远。比方说,我们设置元素perspective为201像素,如下:perspective: 201px;
则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);
translateZ值越大,该元素也会越来越大,当translateZ值非常接近201像素,但是不超过201像素的时候(如200像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面。
当translateZ值再变大,超过201像素的时候,该元素看不见了
2、perspective属性有两种书写形式,一种用在舞台元素上(动画元素们的共同父辈元素);第二种就是用在当前动画元素上,与transform的其他属性写在一起。如下代码示例:
.stage {
perspective: 600px;//视距
}
#stage .box {
transform: perspective(600px) rotateY(45deg);
}
3、perspective-origin
例:perspective-origin: 25% 75%;
(三)transform-style: preserve-3d
transform-style属性也是3D效果中经常使用的,其两个参数,flat|preserve-3d 前者flat为默认值,表示平面的;后者preserve-3d表示3D透视。
一般而言,该声明应用在3D变换的兄弟元素们的父元素上,也就是舞台元素。
(四)backface-visibility
在CSS3的3D世界中,默认情况下,我们是可以看到背后的元素,因此,为了切合实际,我们常常会这样设置,使后面元素不可见:
backface-visibility:hidden;
1、rotateX(45deg);
2、rotateY(45deg);
3、rotateZ(45deg);
(二) perspective属性
perspective的中文意思是透视,视角!
1、我们都知道近大远小的道理,对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远。比方说,我们设置元素perspective为201像素,如下:perspective: 201px;
则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);
translateZ值越大,该元素也会越来越大,当translateZ值非常接近201像素,但是不超过201像素的时候(如200像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面。
当translateZ值再变大,超过201像素的时候,该元素看不见了
2、perspective属性有两种书写形式,一种用在舞台元素上(动画元素们的共同父辈元素);第二种就是用在当前动画元素上,与transform的其他属性写在一起。如下代码示例:
.stage {
perspective: 600px;//视距
}
#stage .box {
transform: perspective(600px) rotateY(45deg);
}
3、perspective-origin
例:perspective-origin: 25% 75%;
(三)transform-style: preserve-3d
transform-style属性也是3D效果中经常使用的,其两个参数,flat|preserve-3d 前者flat为默认值,表示平面的;后者preserve-3d表示3D透视。
一般而言,该声明应用在3D变换的兄弟元素们的父元素上,也就是舞台元素。
(四)backface-visibility
在CSS3的3D世界中,默认情况下,我们是可以看到背后的元素,因此,为了切合实际,我们常常会这样设置,使后面元素不可见:
backface-visibility:hidden;