美文网首页
CSS3--2D转换

CSS3--2D转换

作者: 绚丽多彩的白 | 来源:发表于2020-05-07 12:06 被阅读0次

2D转换

  • 作用
    • 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
  • 格式
    • rotate();
    • translate();
    • scale();
  • 注意点
    • 如果需要进行多个转换, 那么用空格隔开
    • 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

rotate()方法

  • 通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
 ul li:nth-child(2){
            /*其中deg是单位, 代表多少度*/
            transform: rotate(45deg);
 }

translate()方法

  • 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
 ul li:nth-child(3){
            /*
            第一个参数:水平方向
            第二个参数:垂直方向
            */
            transform: translate(100px, 0px);
}

scale()方法

  • 通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
 ul li:nth-child(4){
            /*
            第一个参数:水平方向
            第二个参数:垂直方向
            注意点:
            如果取值是1, 代表不变
            如果取值大于1, 代表需要放大
            如果取值小于1, 代表需要缩小
            如果水平和垂直缩放都一样, 那么可以简写为一个参数
            */
            /*transform: scale(0.5, 0.5);*/
            transform: scale(1.5);
}

形变中心点

  • 作用
    • 设置旋转元素的基点位置
  • 格式
    • transform-origin:水平位置 垂直位置;
  • 注意点
    • 取值有三种形式
    • 具体像素
    • 百分比
    • 特殊关键字

旋转轴向

  • 作用
    • 设置旋转元素的旋转轴向
  • 格式
    • rotateX()
    • rotateY()
    • rotateZ()

perspective:;

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

相关文章

  • CSS3--2D转换

    2D转换 作用通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 格式rotate();tra...

  • 第三章 JavaScript中的数据间类型的转换

    数据的类型转换分为强制类型转换和非强制类型转换,强制类型转换也可以称为显示转换,非强制类型转换也可以称为隐式转换。...

  • js基础篇:类型转换

    1.显示转换:(1)转换Boolean:Boolean(需要转换的值);(2)转换数字用parseInt(需要转换...

  • js总结(2.转换)

    转换 1.隐式转换结论 2.显示转换/强制转换

  • 回顾Date.0402(类型转换、运算)

    类型转换 隐式转换 显式转换 转换为Boolean类型:Boolean(xxx) ; !!xxx 数字类型转换为布...

  • 四、SQL函数④(其他函数)

    类型转换 隐式转换:数据库系统自动将字符串类型转换为整数类型显式转换:使用类型转换函数转换。使用类型转换函数不仅可...

  • 学习记录

    类型转换as?类型转换,转换成功,返回一个可选类型,转换不成功返回nilas!类型转换,转换失败回报运行错误备注:...

  • C语言类型转换

    类型转换的方式 自动类型转换1.运算转换(规则:会把小类型转换为大类型) 2.赋值转换 强制类型转换格式:(类型)...

  • static_cast, dynamic_cast,const_

    1 转换类型 c++中的转换类型分为隐式转换和显示转换。 2 隐式转换 又称为标准转换,包括以下几种情况:1)算数...

  • ffmpeg分解与复用

    视频转换 视频转换不要音频 视频转换不要视频

网友评论

      本文标题:CSS3--2D转换

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