美文网首页
CSS-2D转换模块

CSS-2D转换模块

作者: Strive_12c4 | 来源:发表于2017-05-20 19:36 被阅读0次

    缩放格式  transform:scale(1.5,0.5)
    如果水平和垂直缩放都一样,那么可以简写为一个参数

    注意点
    1. 如果需要进行多个转换,那么用空格隔开
    2. 2D的转换模块会修改元素的坐标系,所以旋转之后再平移就不是水平平移的

    形变中心点

    默认情况下所有的元素都是以自己的中心点作为参考来旋转的,我们可以通过形变中心点属性来修改他的参考点

    取值有三种形式
    具体像素;百分比;特殊关键字

    格式
    transform-origin:200px 100px;
    transform-origin:100% 50%;
    transform-origin:right center;

    旋转轴向

    默认情况下所有元素都是围绕Z轴进行旋转

    想围绕哪个轴旋转,只需要在rotate后面加上哪个轴即可

    透视

    近大远小

    格式:perspective:500px;

    注意点
    透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

    给盒子添加阴影

    box-shadow:水平位移  垂直位移  模糊度  阴影扩展  阴影颜色  内外阴影;

    注意点
    1. 盒子的阴影分为内阴影和外阴影,默认情况下就是外阴影
    2. 快速添加阴影只需要编写三个参数即可
    box-shadow:水平位移  垂直位移  模糊度
    3. 默认情况下阴影的颜色和盒子内容的颜色一致

    给文字添加阴影
    text-shadow:水平位移  垂直位移  模糊度  阴影颜色;

    相关文章

      网友评论

          本文标题:CSS-2D转换模块

          本文链接:https://www.haomeiwen.com/subject/omwuzttx.html