CSS 笔记 (2)- 2D、3D转换 和 box-shadow

原创 乘风逐月 随笔 CSS知识记录 175阅读 2018-07-24 14:26:36 举报
一、 transform 属性

css3 的 transform 属性应用于元素的2D或3D转换。这个属性允许将元素旋转、缩放、移动、倾斜等。
语法: transform: transform-functions

描述
none默认值,不进行转换
translate(x,y)定义2D位移
translate3d(x,y,z)定义3D位移
translateX(x)定义X轴的位移
translateY(y)定义y轴的位移
translateZ(z)定义z轴的位移
scale(x,y)定义2D缩放
scale3d(x,y,z)定义3D缩放
scaleX(x)x轴横向缩放
scaleY(y)y轴的竖向缩放
scaleZ(z)设置z轴的3D缩放
rotate(angle)定义2D旋转
rotateX(angle)定义沿着x轴的3D旋转
rotateY(angle)定义沿着Y轴的3D旋转
rotateZ(angle)定义沿着Z轴的3D旋转
skew(x-angle,y-angle)定义沿着x轴和Y轴的2D倾斜转换
skewX(angle)定义沿着x轴的2D倾斜转换
skewY(angle)定义沿着Y轴的2D倾斜转换
perspective(n)为3D转换定义透视视图,用于设置用户和元素3D空间Z平面之间的距离,值越小,用户与3D空间Z平面距离越近,视觉效果会明显;反之,值越大,用户与3D空间Z平面距离越远,视觉效果越小

注:转化的元素需是一个块元素才可以。

二、transform-origin属性

transform-origin属性是设置元素的2D、3D转换的原点位置,与transform属性配合使用。
语法: transform-origin: x-axis y-axis z-axis;

描述
50% 50% 0默认值,元素的中心点
x-axis定义原点在x轴的位置,可能的值left,right,center,%,length
y-axis定义原点在y轴的位置,可能的值top,bottom,center,%,length
z-axis定义原点在z轴的位置,可能的值length
三、transform-style 属性

transform-style 属性指定嵌套元素是怎样在三维空间中呈现。
语法: transform-style: flat | preserve-3d;

描述
flat表示所有子元素在2D平面呈现
preserve-3d表示所有元素在3D空间中呈现

示例:

代码:

四、box-shadow

box-shadow 属性向元素添加一个或多个阴影,由逗号分隔阴影列表。
语法: box-shadow:x-shadow y-shadow blur spread color inset;

描述
x-shadow必需,水平阴影的位置,允许负值
y-shadow必需,垂直阴影的位置,允许负值
blur可选,模糊距离
spread可选,阴影的尺寸
color可选,阴影的颜色
inset可选,将外部阴影(outset)改为内部阴影
五、单边阴影

给元素四边设置阴影效果,是通过改变 x-shadow 和 y-shadow 来实现的,x-shadow 为负值时生成左边阴影,为正值时生成右边阴影。y-shadow 为负值生成顶部阴影,为正值生成底部阴影。

六、阴影层叠

当给同一个元素使用多个属性时,最先写的阴影将显示在最上面。如果后面的阴影尺寸或模糊距离比前面的小,将会看不到后面的阴影。
例如上面的例子写成这样:

就会看不到蓝色的阴影,会显示成这样:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复