热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【CSS3】transform变形--慕课网【学习总结】

1.旋转rotate()旋转rotate()函数:通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对

1.旋转 rotate()

旋转rotate()函数:通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。

  • 如果这个值为正值,元素相对原点中心顺时针旋转;
  • 如果这个值为负值,元素相对原点中心逆时针旋转。

如下图所示:
这里写图片描述

【例如】


<div class="wrapper">
<div>div>
div>
/*css代码*/
.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}

.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

效果:
这里写图片描述


2.扭曲 skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜

  • rotate()函数只是旋转,而不会改变元素的形状;
  • skew()函数不会旋转,而只会改变元素的形状。

Skew()具有三种情况:

skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);

这里写图片描述
第一个参数对应X轴,第二个参数对应Y轴。
如果第二个参数未设置,则值为0,也就是Y轴方向上无斜切。

skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);

这里写图片描述

skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)

这里写图片描述

【例如】

通过skew()函数将长方形变成平行四边形。


<div class="wrapper">
<div>我变成平形四边形div>
div>
/*css代码*/
.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}

.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg)
;
}

效果:
这里写图片描述


3.缩放 scale()

缩放 scale()函数 让元素根据中心原点对对象进行缩放

缩放 scale具有三种情况:

scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)

这里写图片描述

【例如】

/*css代码*/
div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform: scale(1.5,0.5)
;
}

注意: Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。

scaleX(x)元素仅水平方向缩放(X轴缩放)

这里写图片描述

scaleY(y)元素仅垂直方向缩放(Y轴缩放)

这里写图片描述

【例如】


<div class="wrapper">
<div>我将放大1.5倍div>
div>
/*css代码*/
.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}

.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}

.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5)
;
}

效果:
这里写图片描述

注意: scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。


4.位移 translate()

translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况:

translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)

这里写图片描述

translateX(x)仅水平方向移动(X轴移动)

这里写图片描述

translateY(Y)仅垂直方向移动(Y轴移动)

这里写图片描述

【例如】

通过translate()函数将让不知道宽度和高度的元素实现水平、垂直居中

<div class="wrapper">
我不知道我的宽度和高是多少,我要实现水平垂直居中
div>
/*css代码*/
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

效果:
这里写图片描述


5.矩阵 matrix()

  matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。
  就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵

ax+cy+e表示变换后的水平坐标
bx+dy+f表示变换后的垂直位置
其中:矩阵偏移元素的中心点是(x, y)

【例如】

transform: matrix(1, 0, 0, 1, 30, 30); 
/* a=1, b=0, c=0, d=1, e=30, f=30 */

  假设矩阵偏移元素的中心点是(0, 0),即x=0, y=0。
  于是,变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30;y坐标就是bx+dy+f = 0*0+1*0+30 =30。
  于是,中心点坐标从(0, 0)变成了→(30, 30)。即往右下方同时偏移了30像素。
  【结论】实际上transform: matrix(1, 0, 0, 1, 30, 30); 就等同于transform: translate(30px, 30px);

注意: translate,rotate等方法都是需要单位的,而matrix方法e, f参数的单位可以省略。


6.原点 transform-origin

  任何一个元素都有一个中心点默认情况之下,其中心点是居于元素X轴和Y轴的50%处。如下图所示:
这里写图片描述

  在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们可以通过transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似,如下表所示:
这里写图片描述

【例如】

通过transform-origin 改变元素原点到左上角,然后进行顺时旋转45度

<div class="wrapper">
<div>原点在默认位置处div>
div>
<div class="wrapper transform-origin">
<div>原点重置到左上角div>
div>
/*css代码*/
.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}

.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}

效果:
这里写图片描述



推荐阅读
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 在HTML5应用中,Accordion(手风琴,又称抽屉)效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果,通过层次结构优化信息展示和页面布局,提升用户体验。这些效果不仅增强了视觉效果,还提高了内容的可访问性和互动性。 ... [详细]
  • 许多学生在大学期间学习HTML和CSS时,并没有给予足够的重视,导致学完后仍然只能使用基础的表格布局方法来设计网页。本文将通过实战演练,详细介绍一些高级的CSS布局技巧,帮助读者在实际项目中更加灵活地运用CSS,提升网页设计水平。通过掌握这些技巧,你将在朋友面前展现出卓越的前端开发能力。 ... [详细]
  • 在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 在第10天的夜灵HTML日志中,我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性,但在旧版浏览器中的支持情况并不理想。然而,目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器,我们提供了多种解决方案,以确保网站在不同环境下的兼容性和用户体验。此外,我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]
  • 探索聚类分析中的K-Means与DBSCAN算法及其应用
    聚类分析是一种用于解决样本或特征分类问题的统计分析方法,也是数据挖掘领域的重要算法之一。本文主要探讨了K-Means和DBSCAN两种聚类算法的原理及其应用场景。K-Means算法通过迭代优化簇中心来实现数据点的划分,适用于球形分布的数据集;而DBSCAN算法则基于密度进行聚类,能够有效识别任意形状的簇,并且对噪声数据具有较好的鲁棒性。通过对这两种算法的对比分析,本文旨在为实际应用中选择合适的聚类方法提供参考。 ... [详细]
  • 在Unity3D中,获取游戏对象有多种实用技巧和方法。除了常见的序列化变量拖拽方式外,还可以使用 `GameObject.Find()` 方法通过对象名称或路径来直接获取游戏对象。此外,`Transform.Find()` 和 `GameObject.FindWithTag()` 也是常用的手段,分别适用于通过层级结构和标签来查找游戏对象。这些方法各有优劣,开发者可以根据具体需求选择最合适的方式。 ... [详细]
  • 在HTML布局中,即使将 `top: 0%` 和 `left: 0%` 设置为元素的定位属性,浏览器中仍然会出现空白填充。这个问题通常与默认的浏览器样式、盒模型或父元素的定位方式有关。为了消除这些空白,可以考虑重置浏览器的默认样式,确保父元素的定位方式正确,并检查是否有其他CSS规则影响了元素的位置。 ... [详细]
  • Webdriver中元素定位的多种技术与策略
    在Webdriver中,元素定位是自动化测试的关键环节。本文详细介绍了8种常用的元素定位技术与策略,包括ID、名称、标签名、类名、链接文本、部分链接文本、XPath和CSS选择器。每种方法都有其独特的优势和适用场景,通过合理选择和组合使用,可以显著提高测试脚本的稳定性和效率。此外,文章还探讨了在复杂页面结构中如何灵活运用这些定位技术,以应对各种挑战。 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • 在面试过程中,面试官常常会提问如何使一个DIV元素实现水平和垂直居中。本文将详细介绍几种常用的实现方法。准备工作包括创建一个父容器和一个子容器,通过不同的CSS属性和技术手段,如Flexbox、Grid布局、绝对定位等,来实现DIV元素的精确居中效果。每种方法都有其适用场景和优缺点,读者可以根据具体需求选择最适合的方案。 ... [详细]
  • 在今天的实践中,我深入学习了网页图像抓取技术,通过编写爬虫程序批量获取网站上的图片资源。具体来说,我选择了一个包含大量高质量图片的网站作为练习对象,并成功实现了将这些图片批量下载到本地存储。这一过程不仅提升了我对爬虫技术的理解,还增强了我的编程能力。 ... [详细]
  • 如何使用 net.sf.extjwnl.data.Word 类及其代码示例详解 ... [详细]
  • 技术日志:深入探讨Spark Streaming与Spark SQL的融合应用
    技术日志:深入探讨Spark Streaming与Spark SQL的融合应用 ... [详细]
author-avatar
o0風無痕0o
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有