美文网首页
2D转换模块

2D转换模块

作者: Miss一曦 | 来源:发表于2017-02-24 17:36 被阅读0次

一、transform属性取值:

作用:该属性允许我们对元素进行移动、旋转、缩放

1.translate(100px, 0px) 移动

第一个参数:水平方向
第二个参数:垂直方向

2.rotate(45deg) 旋转

deg是单位, 代表多少度

3.scale(1.5,1.5) 缩放

第一个参数:水平方向
第二个参数:垂直方向
注意点:
1.如果取值是1, 代表不变
2.如果取值大于1, 代表需要放大

  1. 如果取值小于1, 代表需要缩小
    4.如果水平和垂直缩放都一样, 那么可以简写为一个参数
    5.如果需要进行多个转换, 那么用空格隔开
    6.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

二、transform-origin属性取值

作用:设置形变中心点

1.transform-origin:200px 0px;

第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式: 具体像素 、百分比 、特殊关键字

三、perspective

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

相关文章

  • 章节 (20) 2D转换模块

    一. 2D转换模块 2D转换模块 二. 2D转换模块-形变中心点 默认情况下所有的元素都是以自己的中心点作为参考来...

  • 2D转换模块

    2D转换模块 transform:rotate(45deg);_________旋转 transform:tran...

  • 2017-02-24 CSS 学习笔记 pm

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

  • # 2D转换模块 transform(旋转/缩放/平移)

    # 2D转换模块 transform(旋转/缩放/平移) # 形变中心 transform-origin # 旋转...

  • css3(5)

    2D转换之移动 2D转换之旋转 2D转换之缩放 2D转换之斜切

  • 2D转换模块

    盒子阴影和文字阴影 1.如何给盒子添加阴影 1box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜...

  • 2D转换模块

    2D转换模块 格式:transform:值; 取值:transform: rotate(45deg);(顺时针旋转...

  • 2D转换模块

    一、transform属性取值: 作用:该属性允许我们对元素进行移动、旋转、缩放 1.translate(100p...

  • 2D转换模块

    正常的 旋转的transform:rotate(45deg); deg单位代表多少度 平移的transform:t...

  • day20-CSS-2D转换模块

    2D转换模块 旋转transform:rotate(45deg)--代表旋转45° 平移transform:tra...

网友评论

      本文标题:2D转换模块

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