• CSS3-2D转换transform


    2D转换之translate(重点)

    基本语法

    属性:transform,属性值:translate(X,Y),属性值也可以分开书写:

           transform:translate(X,Y)         

           transform:translateX(n)         

           transform:translateY(n)

                transform: translate(50%, 50%);

                transform: translateX(50%);

                transform: translateY(50%);

    注意:

    01、2D转换中的移动translate是沿着X轴和Y轴进行移动的,对行内元素直接设置是不生效的,如果想要生效就要转化为块或者行内块

    02、translate改变元素在页面中的位置,类似定位,不会影响到其他元素的位置,所以我们不用担心元素脱离文档流;

    03、translate的取值可以是实际的像素值:translate(100px,200px),也可以是百分比:translate(50%,50%),如果设置的是百分比那么移动的位置是盒子自身宽高的相对值,比如50%就是自己的宽高的一半

    04、如果转换和定位同时存在,2d转换在定位的书写位置后面,就会将定位的盒子压住,我们可以给定位的盒子设置z-index调节位置;

    定位的盒子水平垂直居中设置

    绝对定位和固定定位的盒子不能使用margin:auto;设置水平居中,如果想要居中我们就需要如下设置:

    设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半,让盒子水平居中;

    设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半,让盒子垂直居中;

    我们现在可以将margin-left和margin-top的取值用2d位移取值为百分比进行替换,哪怕盒子没有固定的宽高都可以生效;

                position: fixed;

                left: 50%;

                top: 50%;

                width: 300px;

                height: 300px;

                /* margin-left: -150px;

                margin-top: -150px; */

                /* translate取值为百分比是盒子自身宽高的百分比,比如50%就相当于300的一半150 */

                transform: translate(-50%, -50%);

    2D转换之rotate(重点)

    基本语法

    属性:transform   属性值:  rotate(度数);

    transform:rorate(度数)   ----- 度数的单位是deg ;

    transform: rotate(30deg);

    注意

    01、rotate后面的度数,如果是正数就是顺时针旋转,如果是负数就是逆时针旋转;

    02、rotate旋转默认的中心点是元素的中心点;

    03、rotate旋转得到度数表示旋转到某一个度数不是旋转了,也就是从当前的度数旋转到另一个度数;

    2D转换之中心点(重点)

    语法:transform-origin:X  Y;

    01、两个参数X和Y之间是用空格隔开的;

    02、X和Y默认的转换中心点取值为(50%  50%);

    03、X和Y也可以设置实际的像素值或者方位名词(top、bottom、left、right、center);

    2D转换之scale(重点)

    语法:transform:scale(X,Y);  

    1. 两个参数X和Y之间是用逗号隔开的;
    2. X和Y的取值如果等于1表示原始大小,小于1表示缩小倍数,大于1表示放大倍数;
    3. X和Y如果只写一个值表示两个参数都是一样;
    4. Scale缩放最大的优势:可以设置转换中心点缩放,默认是中心缩放,还不会影响其他盒子的显示位置;

    2D转换综合写法以及顺序问题(重点)

                /* transform: translateX(1200px);

                transform: rotate(360deg);

                transform: scale(3); */

                transform: translateX(1200px) rotate(360deg) scale(3);

    如果三个属性要同时存在,我们需要用空格将各个属性隔开,位移属性必须写在第一位;

    如果将旋转放在第一位,旋转的之后会将网页的坐标系也进行了旋转,所以效果会出现问题;

    transform:skew( 角度 )

    transform: skew(-30deg);

    (1)    设置一个参数表示X 轴方向角度(一般2D我们只需要设置一个值即可)

    (2)    设置二个参数中间用逗号隔开,分别表示 水平和垂直。

    (3)    角度值可以为正也可以为负

  • 相关阅读:
    redis安装以及php扩展
    Linux下php安装Redis扩展
    正则验证邮箱
    常用方法
    PHPExcel说明
    冒泡排序
    CURL post请求
    PHP生成随机字符串
    PHP中的字符串函数
    PHP中的数组函数
  • 原文地址:https://www.cnblogs.com/ndh074512/p/14619191.html
Copyright © 2020-2023  润新知