关于前端:csstransform2D变换

@[TOC]


CSS transform 属性容许你旋转,缩放,歪斜或平移给定元素。
罕用的transform 属性有上面几个

属性 阐明
translate(0, 0) 位移
rotate(0deg) 旋转
scale(1) 缩放
skew(0deg) 斜切

transform的阐明文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

上面别离说一下这几个办法

translate() 位移

translate通过x、y轴的参数来实现偏移
语法:transform: translate(10px, 10px); x轴偏移10pxy轴偏移10px
也能够独自对某一个轴进行偏移设置,css提供了x、y轴的语法:
transform: translateX(10px);
transform: translateY(10px);

translate的参数能够应用百分比,如果参数是百分比的话,理论的偏移间隔是以本身大小为参考的,例如:一个100px的正方形,translateX(50%),那么理论x轴的偏移量是本身的100px * 50% = 50px,有了这个个性之后,能够通过transform: translate(-50%, -50%); 的写法实现垂直定位居中。

.box{
    width: 20px;
    height: 20px;
    background: #e94242;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

transform: translate第一个参数偏移本身x轴的50%,第二个参数偏移本身y50%,另外left偏移50%,如果本身100px
那么:left + 本身 - x轴本身50% = 50% + 100px - 50px = 偏移量正好居中,y轴同理。

另外,translate是不受文档流影响的,direction: ltr;文档流为左,translateX仍然往右偏移。


rotate() 旋转

rotate() 用于设置元素的旋转角度,rotate(45deg)就是顺时针旋转45°rotate()的旋转受锚点的影响(transform-origin),锚点的问题在下文。
rotate() 有四个单位,别离是:deg角度、grad百分度、rad弧度 、return圈度,最罕用的就是deg角度,其它的日常我的项目根本用不到。

.box{
     width: 20px;
     height: 20px;
     background: #e94242;
     transform: rotate(45deg); 
    }


scale()缩放

scale()有两个参数,语法:transform: scale(参数一 , 参数二),别离对应横向和纵向的放大和放大,默认值为1(不放大)。

transform: scale(2); /**等比放大2倍 */
transform: scaleX(2); /**程度放大2倍 */
transform: scaleY(2); /**垂直放大2倍 */
transform: scale(2,1); /**x轴放大2倍,y轴不变 */
transform: scale(2,0.5); /**x轴放大2倍,y轴放大一半 */
.shiftBox{
     width: 80px;
     height: 80px;
     transform: scale(2,0.5); /**x轴放大2倍,y轴放大一半 */
}


skew() 斜切

斜切字面意思就是将物体歪斜的意思,语法:transform: skew(10deg, 5deg)示意程度斜切10度 垂直斜切5度,它承受两个参数,第一个参数示意x轴,第二个参数y轴。
也能够独自对某一个轴进行斜切,css提供了x、y轴的语法:
transform: skewX(10deg):程度斜切10
transform: skewY(10deg):垂直斜切10

/* skew() 斜切 */
.shiftBox{
    width: 80px;
    height: 80px;
    background: #80c342;
    transform: skew(10deg, 5deg); /**程度斜切10度 垂直斜切5度 */
}

斜切能够利用在图形的变换,只通过调整x、y轴的歪斜角度即可实现一些画面成果,某些场合下比裁切属性(clip-path)不便。
例如:实现当前任务的进度展现

这种成果只须要绘制一个矩形,将x轴歪斜45

再绘制一个矩形,x轴歪斜 -45°即可实现


transform的细节和个性

元素援用transform属性值不会影响元素的尺寸和地位

咱们在日常布局的时候,应用margin或者定位通常会影响到其余的元素

比方下面这个案例,第二个按钮设置了margin-left,导致第三个按钮的地位也发生变化。
如果第二个按钮应用的是transform: translateX()偏移,那么第三个按钮的地位并不会受到影响,因为transform属性值不会影响原始地位

另外,内联元素是不受transform所有的变换个性的影响的,必须转为行内块才能够。

span{
    /* 内联元素不受transform所有的变换个性 */
    display: inline-block; /* 设置行内块后,受transform影响,解决 */
    transform: translateX(50px); 
}


参数的程序不同,会影响后果

transform的参数,会依照先后顺序执行,同样的参数,地位不同则会影响执行后果。

.order{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    :nth-child(1){
        width: 20px;
        height: 20px;
        background: #4d90fe;
        transform: translateX(50px) scale(2); /* 先位移再放大,程序影响后果 */
    }
    :nth-child(2){
        width: 20px;
        height: 20px;
        background: #80c342;
        transform: scale(2) translateX(50px); /* 先放大再位移,程序影响后果 */
    }
}

这里b盒子先放大后,再执行translateX,依照放大后的比例进行的偏移,所以b的偏移量比a的远。

有两点须要留神:
1、transformclip-path同时应用时,先裁剪再变换
2、transformmargin,应该优选抉择transform,性能更高,因为transform属性值不会影响原始地位。


transform会创立新的层叠上下文

多个元素叠在一起时,通常后执行的元素会笼罩先执行的元素,相似上面的:

一层叠一层,如果想突出展现元素能够设置z-index来扭转层级,其实这里应用transform也能够实现,transform会创立新的层叠上下文,后执行的元素会笼罩先执行的,所以这里无需z-index也能够实现突出展现层级成果,这里应用了transform: scale(1); 原大小放弃不变,相当于没对元素做任何操作,然而层叠程序扭转了,如下:

.layer{
    width: 200px;
    height: 50px;
    border: 1px solid red;
    padding-left: 20px;
    margin: 50px;
    >img{
        width: 50px;
        margin-left: -20px;
    }
    >img:hover{
        transform: scale(1); /*原大小*/
        box-shadow: 0px 0px 5px  black;
    }
}


固定定位实效

固定定位fixed:元素会被移出失常文档流,并不为元素预留空间,而是通过指定元素绝对于屏幕视口(viewport)的地位来指定元素地位。元素的地位在屏幕滚动时不会扭转。
但如果fixed的父级设置了transform,那么固定定位将会实效。

/* 固定定位实效 */
.positions{
    width: 200px;
    height: 50px;
    border: 1px solid red;
    margin-top: 10px;
    .positionBox{
        width: 50px;
        height: 50px;
        background: #80c342;
        transform: translateX(10px);
        .positionInner{
            width: 20px;
            height: 20px;
            background: #e94242;
            right: 0px;
            position: fixed; /* 父级设置了transform导致fixed生效 */
     
        }
    }
}


扭转overflow对元素的限度

父级元素设置overflow: hidden;是不能对设置了相对定位的子级元素产生影响的,子级内容超出父级范畴不能被暗藏。

.overFlow{
    width: 100px;
    height: 100px;
    background: #4d90fe;
    overflow: hidden;
    >img{
        width: 200px;
        height: 50px;
        position: absolute; /* 相对定位不受overflow:hidden影响 */
        border: 1px solid red;
    }
}

但如果给父级设置了transform,则会更改overflow的限度,相对定位的子元素也受到到影响

.overFlow2{
    width: 100px;
    height: 100px;
    background: #80c342;
    overflow: hidden;
    transform: scale(1); /* transform更改overflow的限度,相对定位的子元素也受到到影响 */
    >img{
        width: 200px;
        height: 50px;
        position: absolute;  
        bottom: 0;
        border: 1px solid red;
    }
}

在这里还有个留神点,img图片跑到底部了,因为父级元素设置了transform,只有transform属性值不为none的元素也能够作为相对定位元素的蕴含块 ,相当于开启了绝对定位。


transform-origin更改元素变换的核心坐标

transform-origin CSS 属性让你更改一个元素变形的原点。其实就是元素的锚点坐标,默认锚点在元素的核心。

.innerBox2{
        width: 20px;
        height: 20px;
        background: #e94242;
        transform: rotate(20deg);  /*顺时针旋转20°*/
}

锚点在核心,顺时针旋转20°,如果更改锚点的地位为右上角,那么会呈现上面的成果

.innerBox2{
        width: 20px;
        height: 20px;
        background: #e94242;
        transform: rotate(20deg); 
        transform-origin: right top; /**受锚点影响 */
}

锚点能够应用方向关键字,也能够应用参数。

对于锚点的介绍,请看文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

上面通过锚点实现钟摆成果

<div class="originPointer"></div>
.originPointer{
    width: 10px;
    height: 100px;
    margin: 50px;
    &::before{
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        background: #80c342;
        border-radius: 50%;
        transform: translateY(-50%);
    }
    &::after{
        content: '';
        width: 10px;
        height: 100px;
        background: #4d90fe;
        position: absolute;
        clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
        transform: rotate(0deg);
        /* transform-origin: top left; */  /* 扭转锚点为左上角 */
        transform-origin: 0px 0px;  /* 锚点左上角 x轴和y轴,默认终点在最左侧 */
        animation: pointer 2s infinite linear; /* 增加linear使画面流程不卡顿 */
    }
    @keyframes pointer {
        0% {
            transform: rotate(0deg);  
        }
        25% {
            transform: rotate(20deg);
        }
        50% {
            transform: rotate(0deg);
        }
        75% {
            transform: rotate(-20deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }
}


案例源码:https://gitee.com/wang_fan_w/css-diary

如果感觉这篇文章对你有帮忙,欢送点赞、珍藏、转发哦~

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据