css-transform2D变换

这篇具有很好参考价值的文章主要介绍了css-transform2D变换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


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%); 
}

css-transform2D变换
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); 
    }

css-transform2D变换


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轴缩小一半 */
}

css-transform2D变换


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度 */
}

css-transform2D变换

斜切可以应用在图形的变换,只通过调整x、y轴的倾斜角度即可实现一些画面效果,某些场合下比裁切属性(clip-path)方便。
例如:实现当前任务的进度展示
css-transform2D变换
这种效果只需要绘制一个矩形,将x轴倾斜45
css-transform2D变换
再绘制一个矩形,x轴倾斜 -45°即可实现
css-transform2D变换


transform的细节和特性

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

我们在日常布局的时候,使用margin或者定位通常会影响到其他的元素
css-transform2D变换
比如上面这个案例,第二个按钮设置了margin-left,导致第三个按钮的位置也发生变化。
如果第二个按钮使用的是transform: translateX()偏移,那么第三个按钮的位置并不会受到影响,因为transform属性值不会影响原始位置
css-transform2D变换
另外,内联元素是不受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); /* 先放大再位移,顺序影响结果 */
    }
}

css-transform2D变换
这里b盒子先放大后,再执行translateX,按照放大后的比例进行的偏移,所以b的偏移量比a的远。

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


transform会创建新的层叠上下文

多个元素叠在一起时,通常后执行的元素会覆盖先执行的元素,类似下面的:
css-transform2D变换
一层叠一层,如果想突出展示元素可以设置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;
    }
}

css-transform2D变换


固定定位失效

固定定位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失效 */
     
        }
    }
}

css-transform2D变换


改变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;
    }
}

css-transform2D变换
但如果给父级设置了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;
    }
}

css-transform2D变换
在这里还有个注意点,img图片跑到底部了,因为父级元素设置了transform,只要transform属性值不为none的元素也可以作为绝对定位元素的包含块 ,相当于开启了相对定位。


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

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

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

css-transform2D变换
锚点在中心,顺时针旋转20°,如果更改锚点的位置为右上角,那么会出现下面的效果

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

css-transform2D变换
锚点可以使用方向关键字,也可以使用参数。
css-transform2D变换
关于锚点的介绍,请看文档: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);
        }
    }
}

css-transform2D变换


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

如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~文章来源地址https://www.toymoban.com/news/detail-404811.html

到了这里,关于css-transform2D变换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS3系列】第六章 · 2D和3D变换

            Hello大家好, 我是【 麟-小白 】,一位 软件工程 专业的学生,喜好 计算机知识 。希望大家能够一起 学习进步 呀!本人是一名 在读大学生 ,专业水平有限,如发现 错误 或 不足之处 ,请多多指正!谢谢大家!!!         如果 小哥哥小姐姐们 对我的文章感兴趣

    2024年02月08日
    浏览(44)
  • Android 对View 进行旋转、缩放、平移的属性变换后,获取外矩形顶点

    来张图 Android View 通过平移、旋转、缩放后,顶点映射 之前写的这个文章,里面用到的是 matrix.mapPoints() 通过 矩形的4个点来映射出新的4个点。 个人以为这就会得到正确的结果。 最近呢,就想着,验证一下这个是不是正确的 验证想法: “基于 变换后的 ltrb,加一个自定义

    2023年04月23日
    浏览(47)
  • 矩阵的乘法运算与css的3d变换(transform)

    引言:你有没好奇过,在一个使用了transform变换的元素上使用window.getComputedStyle(htmlElement)[\\\'transform\\\'] 查询出来的值代表什么? 为什么硬件加速要使用transform,以及为什么硬件加速会快? 小科普:关于矩阵的乘法 由此,可以看到两个矩阵相乘就是拿第一个的每一行,乘以第二个

    2024年02月08日
    浏览(42)
  • CSS3 属性: transition过渡 与 transform动画

    CSS3 提供了很多强大的功能,使开发人员可以创建更加吸引人的视觉效果,而不需要依赖于 JavaScript 或 Flash。其中, transition 和 transform 是两个常用的属性,它们分别用于创建平滑的过渡效果和元素的变形效果。下面我们将详细介绍这两个属性的使用方法并给出代码示例。 t

    2024年02月04日
    浏览(49)
  • OpenCV-Python学习(20)—— OpenCV 图像几何变换之图像旋转(cv.warpAffine、cv.getRotationMatrix2D、cv.rotate、np.rot90)

    1. 学习目标 学习旋转矩阵; 学习使用 OpenCV 的 cv.warpAffine 函数进行图片的旋转; 学习使用 OpenCV 的 cv.getRotationMatrix2D 来计算不同旋转中心的不同角度的 MAR 旋转变换矩阵; 学习使用 OpenCV 的 cv.rotate 进行特殊角度的旋转(90,180,270 度)。 2. 不同中心的旋转矩阵计算 2.1 图像

    2024年02月09日
    浏览(42)
  • CSS中的transform属性有哪些值?并分别描述它们的作用。

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月12日
    浏览(39)
  • 【CSS3】CSS3 3D 转换 ① ( CSS3 3D 转换简介 | 3D 物体与 2D 物体区别 | 3D 空间坐标系 | 常用的 3D 转换属性 | 3D 位移转换语法 | 代码示例 )

    3D 显示的物体 与 平面 2D 显示的物体有明显的不同 , 3D 显示效果有 近大远小 的 特点 ; 元素的 2D 的 转换效果 有 平移 , 旋转 , 缩放 效果 , 同样有对应的 3D 转换效果 ; 2D 平面坐标系 中 , 只有 x 轴 和 y 轴 ; 3D 空间坐标系 比 2D 平面坐标系 多了一个 Z 轴 ; x 轴 : 水平向右 ; 左侧是

    2024年02月12日
    浏览(49)
  • CSS -- CSS3中3D转换相关属性讲解(translate3d,rotate3d,perspective,transform-style)

    我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。 3D特点: 近大远小。 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。 x轴:水平向右 注意:X右边是正值,左

    2024年02月05日
    浏览(70)
  • 仿射变换中的旋转缩放变换矩阵推导

    仿射变换可以将矩阵形状转换为平行四边形。可以挤压形状,但是必须保持两边平行。常见的是旋转、缩放、平移变换。缩放和平移比较简单,本文重点推导旋转缩放变换矩阵。 任意一点 ( x 0 , y 0 ) (x_0,y_0) ( x 0 ​ , y 0 ​ ) 可以看成 ( x 0 , 0 ) (x_0, 0) ( x 0 ​ , 0 ) 向量和 ( 0 ,

    2024年04月24日
    浏览(87)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包