美文网首页
2017-02-24 CSS 学习笔记 pm

2017-02-24 CSS 学习笔记 pm

作者: GodlinE | 来源:发表于2017-02-24 20:10 被阅读0次

2D 转换模式

transform:rotate(45deg)
deg 是单位,代表旋转多少度
transform:translate(100px,0px);
第一个参数水平方向
第二个参数垂直方向
代表块的平移
transform:scale(1.5);
元素的缩放
第一个参数:水平方向
第二个参数:垂直方向
注意点:如果取值是1,代表不变
如果取值大于1,代表需要放大
如果取值小于1,代表需要缩小
如果水平和垂直缩放都一样,那么可以简写为一个参数
  • 连写注意点
  • 如果需要进行多个转换那么用空格隔开
  • 2D 的转换模块会修改元素的坐标系,所以旋转之后再平移就不是水平平移了
transform:rotate(45deg) translate(100px,0px) scale(1.5,1.5);

2D 转换模块-形变中心点

  • 默认情况下所有的元素都是以自己的中心点作为参考来旋转的,我们可以通过形变中心点属性来修改它的参考点
transform-origin:200px 0px;
transform-origin:50% 50%;
transform-origin:center center;
  • 第一个参数:水平方向
  • 第二个参数:垂直方向
    注意点
    取值三种形式,具体像素/百分比/特殊关键词

2D 转换模块-旋转轴向

  • 什么是透视
    近大远小
    注意点
    一定要注意,透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
perspective:500px;
  • 默认情况所有元素都是围绕 Z 轴进行旋转的
  • 想围绕哪个轴旋转那么就在 rotate 后面直接加上哪个轴即可
transform:rotateY(45deg);
transform:rotateX(45deg);

相关文章

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

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

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

    定位流 固定定位 什么是固定定位固定定位和前面学习的背景关联方式很像,背景定位可以让背景图片不随着滚动条的滚动而滚...

  • 策略PM入门学习(十二)

    3.12 策略搜索的延伸 策略产品经理入门学习笔记:策略PM入门学习(一)策略PM入门学习(二)策略PM入门学习(...

  • 策略PM入门学习(二十五)完结

    5.6 策略在数据上的应用 策略产品经理入门学习笔记:策略PM入门学习(一)策略PM入门学习(二)策略PM入门学习...

  • JDBC笔记

    title: JDBC笔记date: 2017-02-24 22:20:15tags: JDBC JDBC笔记 J...

  • 策略PM入门学习(十四)

    4.4 【功能导向性实例】屏幕亮度策略思考方法 策略产品经理入门学习笔记:策略PM入门学习(一)策略PM入门学习(...

  • CSS学习笔记(2018-07-29)

    CSS学习笔记 CSS 指层叠样式表 (Cascading Style Sheets) CSS语法 CSS 规则由...

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

    网页的布局方式 什么是网页的布局方式网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(文档流/...

  • 策略PM入门学习(十五)

    4.5【功能导向性实例】目的地模块策略思考方法 策略产品经理入门学习笔记:策略PM入门学习(一)策略PM入门学习(...

  • CSS入门学习笔记

    CSS学习笔记 CSS= 层叠样式表 cascading style sheets HTML 表达结构 , CSS...

网友评论

      本文标题:2017-02-24 CSS 学习笔记 pm

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