使用 transform 实现位移、旋转、缩放等效果

平面坐标

-y

-x 0 +x

位移 translate

语法

transform: translate(水平移动距离，垂直移动距离);

取值

正负均可
像素单位数值
百分比（参照盒子自身大小）

配合过渡使用

transition: all 0.5s;

示例：(元素居中效果)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap {width: 500px;height: 200px;border: 1px solid #333;position: relative;}.box {left: 0;top: 0;width: 100px;height: 100px;background-color: skyblue;position: absolute;/* 过渡 */transition: all 0.5s;}/* 鼠标移入后居中 */.wrap:hover .box {top: 50%;left: 50%;/* 替换：margin-left: -1/2x; margin-top: -1/2y */transform: translate(-50%, -50%);}
</style>
</head>
<body><div class="wrap"><div class="box"></div></div>
</body>
</html>

技巧

translate 只给一个值，表示 x 轴方向移动距离
单独设置某个方向的移动：translateX(), translateY()

/* 背景图从右显示 */
background-position: right 0;

示例：双开门

<style>.box {width: 600px;height: 200px;border: 1px solid #333;position: relative;overflow: hidden;}.box::before,.box::after {/* 必须有contetn属性 */content: '';position: absolute;width: 50%;height: 100%;/* 过渡 */transition: all 0.5s;}.box::before {left: 0;top: 0;background-color: skyblue;}.box::after {right: 0;top: 0;background-color: yellow;}/* 鼠标移入 */.box:hover::before {transform: translateX(-100%);}.box:hover::after {transform: translateX(100%);}
</style><div class="box"></div>

旋转 rotate

语法

transform: rotate(角度);

角度单位deg, 正负数均可

正数：顺时针
负数：逆时针

示例：

<style>.box {margin: 0 auto;width: 50px;height: 50px;background-color: skyblue;transition: all 0.5s;}.box:hover {/* 顺时针旋转360度 */transform: rotate(360deg);}
</style><div class="box"></div>

改变转换原点 transform-origin

默认的旋转原点是盒子中心点

语法

transform-origin 原点水平位置, 原点垂直位置;

取值

方位名词 top left right bottom center
像素单位数值
百分比（参照盒子自身尺寸）

示例：

<style>.box {margin: 0 auto;width: 50px;height: 50px;background-color: skyblue;transition: all 0.5s;/* 改变旋转中心点 */transform-origin: right bottom;}.box:hover {/* 顺时针旋转360度 */transform: rotate(360deg);}
</style><div class="box"></div>

多重转换

/* 复合属性先后顺序不一样，效果也不一样 */
transform: translate() rotate();

示例：边走边转

<style>.wrap {width: 600px;height: 200px;border: 1px solid #666;margin: 0 auto;}.box {height: 200px;width: 200px;background-color: skyblue;border-radius: 50%;position: relative;overflow: hidden;transition: all 3s;}.box::before {position: absolute;content: '';width: 200px;height: 100px;background-color: yellow;}.wrap:hover .box {/* 旋转会改变坐标轴向 */transform: translate(400px) rotate(360deg);}
</style><div class="wrap"><div class="box"></div>
</div>

缩放 scale

实现元素从中心点缩放效果

语法

transform: scale(x轴缩放倍数, y轴缩放倍数);

/* x、y等比例缩放 */
transform: scale(缩放倍数);

效果	取值	示例
放大	数值>1	scale(1.2)
不变	数值=1	scale(1)
缩小	数值<1	scale(0.8)

示例：

<style>.box {margin: 0 auto;height: 250px;width: 200px;border: 1px solid #666;overflow: hidden;text-align: center;}.cover {width: 200px;height: 150px;background-color: skyblue;position: relative;}.cover::after {/* 居中布局 */position: absolute;content: '';left: 50%;top: 50%;background-image: url(../img/play-circle.png);background-size: contain;width: 40px;height: 40px;transition: all .5s;/* 居中可以使用 margin 也可以使用 translate *//* 放大 *//* margin-left: -20px;margin-top: -20px;transform: scale(5); */transform: translate(-50%, -50%) scale(5);/* 透明 */opacity: 0;}.box:hover .cover::after {/* transform: scale(1); */transform: translate(-50%, -50%) scale(1);opacity: 1;}
</style><div class="box"><div class="cover"></div><p>欲把西湖比西子</p><p>淡妆浓抹总相宜</p>
</div>

渐变背景 background-image

示例 1：

<style>.box {width: 200px;height: 200px;/* 逗号隔开多个值, 渐变 （从透明到半透明）*/background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));}
</style><div class="box"></div>

示例 2：

<style>p {margin: 0;padding: 0;}.box {display: block;width: 200px;height: 150px;margin: 0 auto;position: relative;overflow: hidden;}.box .cover {width: 100%;height: 100%;object-fit: cover;transition: all 0.5s;}.box .title {position: absolute;width: 100%;height: 50px;padding: 10px;bottom: 0;left: 0;color: white;box-sizing: border-box;z-index: 2;}/* 渐变背景 */.box .mask {position: absolute;opacity: 0;transition: all 0.5s;width: 100%;height: 100%;top: 0;left: 0;background-image: linear-gradient(transparent,rgba(0, 0, 0, .6));}.box:hover .mask {opacity: 1;}.box:hover .cover {transform: scale(1.2);}
</style><a class="box"href="#"><img class="cover"src="https://api.isoyu.com/bing_images.php"alt=""><div class="title"><p>百日依山尽</p></div><div class="mask"></div>
</a>

02_平面转换 transform相关推荐

六、CSS 速览 —— 平面转换、3D转换、动画
平面转换.3D转换.动画字体图标 iconfont 阿里图标库从图标库引用素材平面转换 transition: all 1s; 设置元素变换动画 transform: translate(px, ...
CSS——字体图标、平面转换、缩放
一.字体图标字体图标主要用于网页中通用.常用的一些小图标: 精灵图的缺点:1.图片文件大: 2.图片放大和缩小会有失真的问题: 3.一旦图片制作完成想要更换非常复杂. 字体图标iconfont,展示 ...
移动WEB学习 - 字体图标、平面转换、渐变
一.字体图标目标:使用字体图标技巧实现网页中简介的图标效果字体图标的优点: 灵活性:灵活的修改样式,例如:尺寸.颜色等轻量级:体积小,渲染快.降低服务器请求次数兼容性:几乎兼容所有主流浏览器 ...
HTML、CSS学习笔记3（平面转换：位移、旋转、缩放，渐变）
1.平面转换使用 transform 属性实现元素的位移.旋转.缩放等效果 2D转换 2D转换是改变标签在二维平面上的位置和形状移动:translate 旋转:rotate 缩放:scale 1. ...
HTML5、CSS3进阶——字体图标、平面转换
1.<link rel="stylesheet" href="字体图标类"> 在对应的标签直接调用iconfont 图标名 2.iconfont上传 ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
【CSS3】平面转换空间转换动画
目录平面转换平移缩放倾斜旋转 transform复合属性空间转换空间位移空间旋转呈现立体图形空间缩放动画动画属性 steps逐帧动画多组动画平面转换 CSS3中动画效果包括 ...
iconfont图标、平面转换、颜色渐变
一.iconfont图标使用步骤 1.打开阿里巴巴矢量图标库,查找自己需要的图标. 2.点击下载,添加至项目 3.两种方法:下载至本地.生成线上链接(注意在生成链接后前面添加http:) 4.下载至本 ...
CSS3新选择器，盒子模型，过渡动画transition，2D转换transform
关于css属性选择器常用的有: id选择器(#box),选择id为box的元素类选择器(.one),选择类名为one的所有元素标签选择器(div),选择标签为div的所有元素后代选择器(#box ...

02_平面转换 transform