文章目录

前言
一、二维坐标系
二、2D转换之移动translate
- 1.语法
- 2.重点
三、2D转换之旋转rotate
- 1.语法
- 2.重点
- 3.案例：三角形
四、2D转换中心点transform-origin
- 1.语法
- 2.重点
- 3.案例：旋转案例
五、2D转换之缩放scale
- 1.语法
- 2.重点
- 3.案例
- - 案例1：图片放大案例
  - 案例2：分页按钮
六、2D转换综合写法

前言

转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换（transform）可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

一、二维坐标系

2D转换时改变标签在二维平面上的位置和形状的一种技术，

二、2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

1.语法

transform：translate（x，y）;或者分开写
transform:translateX(n);
transform:translateY(n);

2.重点

定义2D转换中的移动，沿着X轴和Y轴移动
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%)
对行内标签没有效果

三、2D转换之旋转rotate

2D旋转指的是元素在2维平面内顺时针或者逆时针旋转。

1.语法

transform:rotate(度数）

2.重点

rotate里面跟度数，单位是deg 比如rotate（45deg）
角度为正时，顺时针，负时，为逆时针；
默认旋转的中心点是元素的中心点。

3.案例：三角形

 <style>div {position: relative;width: 249px;height: 35px;border: 1px solid #000;}div::after {content: '';position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);transition: all .2s;}/* 鼠标经过div里面的三角形旋转 */div:hover::after {transform: rotate(225deg);}</style>
</head><body><div>123</div>
</body>

四、2D转换中心点transform-origin

可以设置元素转换的中心点

1.语法

transform-origin：x y;

2.重点

注意后面的参数x和y用空格隔开
x y 默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center）

3.案例：旋转案例

 <style>div {overflow: hidden;width: 200px;height: 200px;border: 1px solid pink;margin: 10px;float: left;}div::before {content: '余华';display: block;width: 100%;height: 100%;background-color: hotpink;transform: rotate(180deg);transform-origin: left bottom;transition: all .4s;}/* 鼠标经过div里面的before 复原 */div:hover::before {transform: rotate(0deg);}</style>
</head><body><div></div>
</body>

五、2D转换之缩放scale

缩放,顾名思义，可以放大和缩小，只要给元素添加上了这个属性就能控制它是放大还是缩小。

1.语法

transform：scale（x,y）;

2.重点

注意其中的x和y用逗号分隔
transform：scale（1，1）：宽和高都放大一倍，相当于没有放大
transform：scale（2，2）：宽和高都放大了2倍
transform：scale（2）：只写一个参数，第二个参数和第一个参数一样，相当于scale（2，2）
transform：scale（0.5，0.5）：缩小
scale缩放最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

3.案例

案例1：图片放大案例

 <style>div {overflow: hidden;float: left;margin: 10px;}div img {transition: all .4s;}div img:hover {transform: scale(1.1);}</style>
</head><body><div><a href="#"><img src="../images/scale.jpg" alt=""></a></div><div><a href="#"><img src="../images/scale.jpg" alt=""></a></div><div><a href="#"><img src="../images/scale.jpg" alt=""></a></div>
</body>

案例2：分页按钮

 <style>li {float: left;width: 30px;height: 30px;border: 1px solid pink;margin: 10px;text-align: center;line-height: 30px;list-style: none;border-radius: 50%;cursor: pointer;transition: all .4s;}li:hover {transform: scale(1.2);}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</body>

六、2D转换综合写法

注意：

同时使用多个转换，其格式为：transform：translate（），rotate（），scale（）…等
其顺序会影响转换的效果（先旋转会改变坐标轴方向）
当同时有位移和其他属性的时候，位移要放到最前面

2D转换及相关案例实现相关推荐

（27）css3 2D转换综合案例—卡包效果
卡包效果实现思路如下: 1.将盒子的尺寸和图片的尺寸宽高度相同. 2.给图片设置绝对定位让他堆叠在盒子里面,相对于父亲,所以父亲设置相对定位,父相子绝. 3.给盒子添加鼠标hover事件,当鼠标移入的 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换案例代码效果图元素变形原点 3D转换 3D转换--案例案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
2D转换动画 3D转换
好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困 transform:sacle(x,y) 缩放缩放 x y放倍数宽度,高度注意其中x y用逗号分隔可以是小数不会影响其他盒子鼠 ...
CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
【css3文字阴影+盒子阴影+过渡+2d转换+3d转换】
文字阴影text-shadow text-shadow 后面的值有4个: 第一个:X轴,水平阴影位置允许负值. 第二个:y轴,垂直阴影位置,允许负值. 第三个:blur, 模糊的距离第 ...
2D转换之旋转与缩放
2D转换之旋转 rotate 2D转换指的是让元素在2维平面内顺时针旋转或者逆时针旋转. 1. 语法: transform:rotate(度数) 2. 重点: 1. rotate里面跟度数,单位是de ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...

2D转换及相关案例实现

文章目录

前言

一、二维坐标系

二、2D转换之移动translate

1.语法

2.重点

三、2D转换之旋转rotate

1.语法

2.重点

3.案例：三角形

四、2D转换中心点transform-origin

1.语法

2.重点

3.案例：旋转案例

五、2D转换之缩放scale

1.语法

2.重点

3.案例

案例1：图片放大案例

案例2：分页按钮

六、2D转换综合写法

2D转换及相关案例实现相关推荐

最新文章

热门文章