css3有趣的transform形变
Python微信订餐小程序课程视频
https://edu.csdn.net/course/detail/36074
Python实战量化交易理财系统
https://edu.csdn.net/course/detail/35475
在CSS3中,transform属性应用于元素的2D或3D转换,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的形变处理
语法:
div{transform: none|transform-functions;
}
transform
属性可以指定为关键字值none
或一个或多个值
注意:当transform有多个属性值时要用**空格
**隔开
属性值:
值 | 描述 |
---|---|
translate(x,y) | 沿着 X 和 Y 轴移动元素。 |
translateX(n) | 沿着 X 轴移动元素。 |
translateY(n) | 沿着 Y 轴移动元素。 |
scale(x,y) | 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 缩放转换,改变元素的宽度。 |
scaleY(n) | 缩放转换,改变元素的高度。 |
rotate(angle) | 旋转,在参数中规定角度。 |
rotateX() | 围绕 X 轴旋转 |
rotateY() | 围绕 Y 轴旋转 |
skew(x-angle,y-angle) | 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 倾斜转换,沿着 X 轴。 |
skewY(angle) | 倾斜转换,沿着 Y 轴。 |
下面对这些属性值进行一一讲解:
一、rotate(旋转)
**rotate(angle)**通过指定的角度参数对原元素指定一个2D旋转,angle代表旋转角度:正值表示顺时针旋转、负值表示逆时针旋转
单位:deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
转换:弧度 = 角度*π/180
<div class="box">div>
.box{width: 200px;height: 200px;background-color: #B39DDB;transition: .2s; /* 过渡属性 */
}
.box:hover{transform: rotate(30deg); /* 顺时针旋转30度 */
}
这里用了下 css3中transition 过渡属性,不然在形变时会很生硬
效果如下:
而rotateX
和rotateY
是围绕X轴和Y轴旋转的,上面这个案例可以看做是围绕Z轴旋转,大家可以脑构一下三维坐标系,我们眼睛所看到屏幕的方向就可以当做Z轴
rotateX
围绕X轴旋转:
.box:hover{transform: rotateX(45deg); /* x轴旋转45度 */
}
![](https://img2022.cnblogs.com/blog/2569817/202201/2569817-20220131202856378-246834349.gif)
rotateY
围绕Y轴旋转:
.box:hover{transform: rotateY(45deg); /* Y轴旋转45度 */
}
二、translate(位移)
translate()
这个 CSS 函数在水平和/或垂直方向上重新定位元素translate(x,y)对元素同时向X轴和Y轴移动,值为负数则反方向移动
translateX()元素在X轴移动
translateY()元素在Y轴移动
下面分别演示这三个功能效果:
.box:hover{transform: translate(40px,80px); /* 向X轴移动+40px,向y轴移动+80px */
}
效果如下:
注意:如果translate()
值传递一个值,则默认和translateX()
效果一致
translateX()
元素在X轴移动
.box:hover{transform: translateX(50px); /* 向X轴移动+50px */
}
效果如下:
translateY()元素在Y轴移动
.box:hover{transform: translateY(50px); /* 向Y轴移动+50px */
}
效果如下:
三、scale(缩放)
CSS 函数
scale()
用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值
该变换通过一个二维向量确定在一个方向缩放的多少
- 当坐标值处于区间 [
-1, 1]
之外时,该变换将在相应的坐标方向上放大该元素 - 当处在区间之中时,该变换将在相应的坐标方向上缩小该元素
- 当值为1时将不进行任何处理
- 当为负数时,将进行像素点反射之后再进行大小的修改。
语法:
scale(sx)
/* or */
scale(sx,sy)
sx表示缩放向量的横坐标
sy表示缩放向量的纵坐标。如果未设置,则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放
html
<div class="box">鼠标移入放大/缩小div>
css
.box{width: 200px;height: 200px;background-color: #B39DDB;transition: .2s; /* 过渡属性 */margin: 300px auto;text-align:center;line-height:200px;
}
.box:hover{transform: scale(2);/* 等同于 */transform: scaleX(2) scaleY(2);
}
设置一个值就是均等缩放,效果如下:
设置两个值就是在X和Y两个维度缩放并移动缩放中心,例子如下:
.box:hover{transform: scale(2,3);
}
如果设置的值在区间 [-1, 1]
之间,该变换将在相应的坐标方向上缩小该元素:
.box:hover{transform: scale(0.5);
}
值为1则为元素本身大小,不进行任何变换
如果值为负数,则反向镜像放大:
.box:hover{transform: scale(-1.5); /* 镜像放大 */
}
scaleX()
和scaleY()
只是单独在X轴和Y轴方向缩放元素,可以理解为scale()
是它俩的复合属性,如果只是单个方向缩放,直接使用对应函数即可:
scaleX()只在X轴方向缩放:
.box:hover{transform: scaleX(2); /* x方向放大两倍 *//* or */transform: scale(2,1);
}
scaleY()只在Y轴方向缩放:
.box:hover{transform: scaleY(2); /* Y方向放大两倍 *//* or */transform: scale(1,2);
}
四、skew(倾斜)
**
skew()
**函数定义了一个元素在二维平面上的倾斜转换单位:deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
转换:弧度 = 角度*π/180
这种转换是一种剪切映射(横切),它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离,进行成比例的值调整;因此,一个点离原点越远,其增加的值就越大
语法:
skew(ax)
/* or */
skew(ax, ay)
ax是一个 ,表示用于沿横坐标扭曲元素的角度
ay是一个 ,表示用于沿纵坐标扭曲元素的角度。如果未定义,则其默认值为0,导致纯水平倾斜。
html
<div class="box">倾斜元素div>
css
.box{width: 200px;height: 200px;background-color: #B39DDB;transition: .2s; /* 过渡属性 */margin: 300px auto;text-align:center;line-height:200px;
}
.box:hover{/* 纯水平倾斜 */transform: skew(25deg);/* or */transform: skew(25deg,0);/* or */transform: skewX(25deg);
}
效果如下:
注意:如果值为负数,则在相反方向倾斜,比如下面这个例子:
.box:hover{/* 负值反方向倾斜 */transform: skew(-25deg);
}
设置两个值就是同时在X轴和Y轴上倾斜元素:
.box:hover{/* 同时在X轴和Y轴上倾斜元素 */transform: skew(20deg,10deg);
}
skewX()
和skewY()
只是单独在X轴和Y轴方向倾斜元素,可以理解为skew()
是它俩的复合属性,如果只是单个方向倾斜,直接使用对应函数即可:
skewX()只在X轴方向倾斜:
.box:hover{/* 只在X轴上倾斜元素 */transform: skewX(30deg);
}
skewY()只在Y轴方向倾斜:
.box:hover{/* 只在Y轴上倾斜元素 */transform: skewY(30deg);
}
五、transform-origin(基点)
transform-origin
CSS属性让你更改一个元素变形的原点
语法:
/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;/* x-offset | y-offset */
transform-origin: 3cm 2px;/* x-offset-keyword | y-offset */
transform-origin: left 2px;
x-offset
表示变形变形中心距离盒模型的左侧偏移值
y-offset
表示变形变形中心距离盒模型的顶部偏移值
offset-keyword
表示定义相对应的变形中心偏移
取值:
- 自定义(单位:cm、px、%)
- 关键词:top、bottom、left、right、center(默认)
transform-origin
属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量
栗子1:
html
<div class="box">不同基点形变div>
css
.box{width: 200px;height: 200px;background-color: #B39DDB;transition: .2s; /* 过渡属性 */margin: 300px auto;text-align:center;line-height:200px;/* 设置元素变形基点 */transform-origin: 0 0; /* 左上角 *//* 等同于 */transform-origin: top left;
}
.box:hover{transform: rotate(30deg); /* 旋转 */
}
效果如下:
栗子2:
.box{width: 200px;height: 200px;background-color: #B39DDB;transition: .2s; /* 过渡属性 */margin: 300px auto;text-align:center;line-height:200px;/* 设置元素变形基点 */transform-origin: 100% -30%;
}
.box:hover{transform: scale(1.7); /* 旋转 */
}
效果如下:
栗子3:
.box{width: 200px;height: 200px;background-color: #B39DDB;transition: .2s; /* 过渡属性 */margin: 300px auto;text-align:center;line-height:200px;/* 设置元素变形基点 */transform-origin: bottom 100%;
}
.box:hover{transform: skewX(50deg);
}
效果如下:
六、结束语
到这里css3中的2D形变分享到这里,另外需要大家注意的是:如果transform有多个属性值时需要用空格隔开,并且属性值书写顺序的不同得到的效果也是不同的!!!
例如:
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style type="text/css">
.box{width: 200px;height: 200px;background-color: #B39DDB;transition: .2s; /* 过渡属性 */margin: 300px auto;text-align:center;line-height:200px;
}
.box:hover{transform: translateX(200px) rotate(30deg) skew(20deg);
}style>head><body><div class="box">不同基点形变div>body>
html>
效果如下:
下面我们把transform的属性值顺序换一下看看效果:
.box:hover{transform: rotate(30deg) translateX(100px) skew(20deg);
}
可以看出这两个顺序不同得到的效果也是不一样的,各个属性值之间必须用空格分开!
本篇分享到此结束~
css3有趣的transform形变相关推荐
- CSS3简单特效--transform实现翻书效果
CSS3简单特效–transform实现翻书效果 上一篇介绍了animation如何实现流光按钮效果,现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果,下图是鼠标停在 ...
- css3 @keyframes、transform详解与实例
一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...
- ios 设置属性的center_IOS开发-常用UI控件的基本使用(Transform形变属性、frame属性、center属性的使用)...
3. disabled(失效状态,不可用状态) 如果enabled属性为NO,就是处于disable状态,代表按钮不可以被点击,默认情况是可以点击的. 对应的枚举常量:UIControlStateDi ...
- CSS3中的transform变形
在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...
- css3动画模块transform transition animation属性解释
首先来看下对各大浏览器的兼容性 IE Firefox Safari Chrome Opera CSS 2D Transform no 3.5 3.2 2.0 10.5 CSS 3D Transfo ...
- 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...
- 运用css3新属性transform写的盒子嵌套展开动画效果
刚刚进园,第一篇博客,记录一下CSS3 绘制盒子效果的方法. css3允许使用 3D 转换来对元素进行格式化,转换是使元素改变形状.尺寸和位置的一种效果,3D转换可以通过设置transform的属性值 ...
- CSS3有趣的渐变色
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士 这里给大家分享几个有趣的渐变色,用来丰富页面. 一.背景色渐变 经常用的就是给背景色增加渐变效果,这里的语法顺序不要错(牵扯到优雅降级和 ...
- CSS3 新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等. transform属性有一项奇怪的特性,就是它们对于其周围 ...
最新文章
- 计算机软件uml,计算机软件——UML旅游管理系统
- JS的prototype和__proto__
- 我所理解的原型原型链 1
- HTTP常用状态码说明
- 利用HttpModuler实现WEB程序同一时间只让一个用户实例登陆
- 判断sem信号量为零_Linux系统编程——进程同步与互斥:System V 信号量
- 蓝桥杯-5-1最小公倍数(java)
- MATLAB化坐标系(转载的)
- cnn卷积中padding作用
- placement new--《C++必知必会》 条款35
- while 中 break 与 continue 的区别
- python能做什么-python能用来做什么?这3大主要用途你一定要知道!(实用)
- SQL 插入一列数据
- Python爬虫编程思想(92):项目实战:抓取京东图书评价
- Northwind 示例数据库
- CF #595 Div.3 F. Maximum Weight Subset//树形dp
- 将内存ffff:0~ffff:b单元中的数据复制到0:200~0:20b单元中
- 永久域名存在吗?永久域名注册流程是什么样的?
- 面由心生,由脸观心:基于AI的面部微表情分析技术解读
- 【转载】Excel操作 Microsoft.Office.Interop.Excel.dll的使用
热门文章
- 鸿蒙之始空之轮,时空之轮再转,JRPG在手机上延续的生命律动
- 设计模式-05 (工厂模式)
- python上安装reuquest_八爪鱼增值API文档
- SQL数据库操作命令大全
- Linux驱动学习--V4L2设备(一)驱动注册流程及meida_device介绍
- 第三代计算机的内存是,电脑内存才DDR3,为何手机内存是LPDDR4?
- 幕墙建筑材料英国UKCA认证—EN 1364-3
- 【Apache】Web 服务器配置与 FTP 服务器配置
- [C++] 动态内存分配
- 学习TypeScript数据类型-从零到英雄