有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

css3-2d和3d转换3d函数

代码编程 cat 11个月前 (11-03) 29次浏览 已收录 0个评论 扫描二维码

2d转换的方法:

css3-2d和3d转换3d函数

translate(x,y)作用:沿X,Y轴位移

参数-长度值:

可以是1-2个值

1个值表示沿X轴位移,两个值表示分别沿X轴,Y轴位移

取值:px  &  百分比(强调相对于元素本身大小计算)说明:允许负值,正值默认向右向下,负值向左向上

拆分单独定义:

translateX( 长度值 ) 沿X轴缩放

translateY( 长度值 ) 沿Y轴缩放

结合定位实现居中第三种方式demo:

父盒子{
    position:relative; 
}
子盒子{
    position:absolute; 
    left:50%; 
    top:50%; 
    //沿着自身原来位置移动自身宽度、高度的一半 
    transform:translate(-50%,-50%); 
}

scale(x,y)作用:沿x,y轴缩放元素大小

参数-数值,表示缩放倍率(没有单位的数字)

可以是1-2个值

1个值,表示沿X轴,Y轴同时缩放

2个值 两个值表示分别沿X轴、Y轴缩放

取值-默认值为1 不放大也不缩小

使用0~1之间的值 【缩小】元素

使用大于1的值【放大】元素。

允许负值——负值表示先反转再缩放

单独定义:

scaleX( 缩放倍率 ) 沿X轴缩放

scaleY( 缩放倍率 ) 沿Y轴缩放

skew(x,y)作用:沿x,y轴 倾斜元素

参数-角度(单位通常使用deg)

skew(x,y) 水平方向和垂直方向同时倾斜

1个值沿X轴方向的斜切

2个值分别表示沿X,Y轴方向的斜切

单独定义:

skewX(x)仅水平方向(X轴)倾斜

skewY(Y)仅垂直方向(Y轴)倾斜

rotate( angle )作用:定义2d旋转

参数:角度(单位通常使用deg)

取值-角度,单位deg

正数表示顺时针旋转,负数表示逆时针旋转

转换基点:transform-origin 定义转换原点(基点)

transform-origin:x轴位置 y轴位置 Z轴位置(默认0);
空格隔开的两个值时,分别表示x轴,Y轴位置
一个值时,另一个值默认center

取值-px (相对于元素本身左上角为0.0点的坐标位置) / 百分比 (元素自身大小的百分比)

关键字:

水平:left center right

垂直:top center bottom

3d转换:

3d坐标轴:

css3-2d和3d转换3d函数

3d转换的方法

rotateX(angle)作用:沿着 X 轴旋转

取值-角度:单位deg

正值顺时针,负值逆时针

perspective属性

表示视距(观察者距离视图的距离)

作用:使子元素以透视效果显示(近大远小)

取值:

number 元素距离视图的距离,以像素计。

none(0)默认值。表示没有透视效果透视。

值越小透视效果越明显

注意:当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身

rotateY(angle)作用:沿着 y 轴旋转

取值-角度:单位deg

正值顺时针,负值逆时针

rotateZ(angle)作用:沿着 Z 轴旋转

取值-角度:单位deg

正值顺时针,负值逆时针

translateZ( z )作用:沿Z轴位移

取值-px 不允许百分比值

scaleZ( z )作用:沿Z轴缩放

取值-默认值为1

使用0~1之间的值【缩小】元素,

使用超过1的值【放大】元素

transform-style作用定义嵌套子元素是否以3d空间呈现

取值:

flat 子元素在2D平面呈现。

preserve-3d 子元素以3D空间呈现

注:通常加给父元素   只对3d转换的元素有效

transform多组值 简写

多重转换 —— 空格隔开

transform:rotateY(80deg) scaleZ(2);

3d函数:

tranlate3d(X,Y,Z)作用:定义元素在X,Y,Z轴上的平移

例:
translate3d(100px,200px,300px) 表示分别沿x轴平移100px, y轴平移200px,Z轴平移300px

scale3d(x,y,z) 作用:定义元素在X,Y,Z轴上的缩放

例: 
scale3d(2,1.5,0.5) 表示分别沿x轴放大2倍,y轴放大1.5倍,Z轴缩小0.5

rotate3d(tx,ty,tz,角度)作用:定义元素在X,Y,Z轴上的旋转

tx,ty,tz 矢量值

其中两上为0,另一个值只有0与非0的区别

rotate3d(0,0,1,30deg) 沿Z轴旋转30deg 相当于 rotateZ(30deg)
rotate3d(1,0,0,30deg) 沿X轴旋转30deg 相当于 rotateX(30deg)
rotate3d(0,1,0,30deg) 沿y轴旋转30deg 相当于 rotateY(30deg)

其中两个不为0,tx,ty,tz相当于倍率

rotate3d(1,1,1,30deg) 沿X轴旋转30deg 沿y轴旋转30deg 沿z轴旋转30deg 
rotate3d(0.5,1,0,30deg) 沿X轴旋转15deg 沿y轴旋转30deg
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址