实习的Day10(学习CSS高级技巧)2D,3D变形
2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform transform 变换 变形的意思 《 transformers 变形金刚》
移动 translate(x, y)
translate 移动平移的意思
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QhufpVM4-1571296821117)(media/1498443715586.png)]
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置,x、y可为负值;
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(Y)仅垂直方向移动(Y轴移动)
让定位的盒子水平居中
**缩放 scale(x, y) **
对元素进行水平或垂直方向的缩放
scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(Y轴缩放)
**旋转 rotate(deg) **
可以对元素进行旋转,正值为顺时针,负值为逆时针;
transform:rotate(45deg);
transform-origin可以调整元素转换变形的原点
transform-origin: 50px 10px ;
如果是4个角,用left,top,这些值,如果想要精确的位置,就用像素值
**倾斜 skew(deg, deg) **
transform:skew(30deg,0deg);
3D变形(CSS3) transform
**rotateX() **
就是沿着 x 立体旋转.
rotateY()
沿着y轴进行旋转
rotateZ()
沿着z轴进行旋转
透视(perspective)
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
- 透视原理: 近大远小 。
- 浏览器透视:把近大远小的所有图像,透视在屏幕上。
- perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素
translateX(x)
仅水平方向移动**(X轴移动)
translateY(y)
仅垂直方向移动(Y轴移动)
translateZ(z)
前后移动,直观的表现就是大小变化
translate3d(x,y,z)
[注意]其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值
**backface-visibility **
backface-visibility 属性定义当元素不面向屏幕时是否可见。