css3 2D变形（transform）移动、缩放、旋转、倾斜
一. translate(x,y) 或者translateX(x)或者translateY(y)
注意点：translateX(x)和translateY(y)大写X和Y；只写一个值，默认y=0。
<body>
<div></div>
</body>
div{
width: 200px;
height: 200px;
background: rgb(185, 24, 24);
transition: all 1s;
}
div:hover {
transform: translate(100px,100px);/* 只写一个值，默认y=0 */
}
一个作用：使定位的盒子居中对齐，代替原来的方法——嵌套的定位盒子如何居中？
<div class="father">
<div class="son"></div>
</div>
.father {
width: 300px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.son {
width: 100px;
height: 100px;
background: rgb(133, 57, 57);
position: absolute;
/* 水平垂直居中 */
left: 50%;
top: 50%;
transform: translate(-50%,-50%);/* transform的位移是居于自身位置的移动，并且会保留位置，类似relative */
}
二、scale(x,y)或scaleX(x)或scaleY(y)
注意点：scaleX(x)和scaleY(y)大写X和Y；只写一个值，默认x=y。
<body>
<div></div>
</body>
div{
width: 200px;
height: 200px;
background: rgb(185, 24, 24);
transition: all 1s;
}
div:hover {
transform: scale(0.6);/* 只写一个值，x=y=0.6 */
}
示例：鼠标经过盒子，图片会动（被放大），效果如下：
<body>
<div><img src="sina.jpg"></div>
</body>
div{
width: 229px;
height: 143px;/* 盒子和图片宽高相等 */
overflow: hidden;/* 等下图片放大，切掉超过部分 */
}
img{
transition: all 0.3s;/* 添加一个过渡效果 */
}
div:hover img{
transform: scale(1.1);/* 鼠标经过盒子时，里面的图片（宽高都）放大110% */
}
三、rotate(angle)或rotateX(angle)或rotateY(angle)
注意：transform-origin 可以设置旋转点，默认是中心点 ；一定要跟度数deg。
<body>
<div></div>
</body>
div{
width: 200px;
height: 200px;
background: rgb(185, 24, 24);
transform-origin: bottom right;/* 设置旋转点，默认是中心点 */
transition: all 1s;
}
div:hover {
transform: rotate(180deg);/* deg必须要写 */
}
示例，旋转的6张图片，效果如下：
<body>
<ul>
<li><img src="1.jpg" ></li>
<li><img src="2.jpg" ></li>
<li><img src="3.jpg" ></li>
<li><img src="4..jpg" ></li>
<li><img src="5.jpg" ></li>
<li><img src="6.jpg" ></li>
</ul>
</body>
ul {
width: 220px;
height: 220px;
position: relative;
}
li{
list-style: none;
position: absolute;
left:;
top:;
transform-origin: left top;
transition: all 1s;
}
ul:hover li:first-child{
transform: rotate(60deg);
}
ul:hover li:nth-child(2){
transform: rotate(120deg);
}
ul:hover li:nth-child(3){
transform: rotate(180deg);
}
ul:hover li:nth-child(4){
transform: rotate(240deg);
}
ul:hover li:nth-child(5){
transform: rotate(300deg);
}
ul:hover li:last-child{
transform: rotate(360deg);
}
四、skew(x-angle,y-angle)或者skewX(angle)或者skewY(angle)
<body>
<div></div>
</body>
div{
width: 200px;
height: 200px;
background: rgb(185, 24, 24);
transition: all 1s;
}
div:hover {
transform: skew(20deg,30deg);/* 只写一个，y=0 */
}
总结：1. transform 可以连写，但是连写的顺序会影响动画，它是按照一定顺序来的；
2. transform 经常与 过渡transition 一起连用，用来展示动画效果；
3.有2D 也有3D，3D就是利用有XYZ轴，后面的补上。
css3 2D变形（transform）移动、缩放、旋转、倾斜的更多相关文章
- CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
- WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示
原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图:XAML代码:// Transform.XAML< ...
- CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- css3 2D变换 transform
旋转函数rotate(),deg表示度数,transform-origin表示旋转的基点 <head> <title>无标题文档</title> <style ...
- 2D变形transform的translate和rotate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix
MainActivity如下: import android.os.Bundle; import android.view.MotionEvent; import android.view.View; ...
随机推荐
- Python+VSCode+Git【转】
Python+VSCode+Git 学习总结 - 秦无邪 - 博客园
- 十分钟快速创建 Spring Cloud 项目
一般来说,Intelij IDEA 可以通过 Maven Archetype 来快速生成Maven项目,其实 IDEA 集成了 Spring 官方提供的 Spring Initializr,可以非常方 ...
- Bipartite Checking CodeForces - 813F (线段树按时间分治)
大意: 动态添边, 询问是否是二分图. 算是个线段树按时间分治入门题, 并查集维护每个点到根的奇偶性即可. #include <iostream> #include <sstream ...
- 2019牛客多校九 I. KM and M (类欧几里得)
大意: 给定$N,M$, 求$\sum\limits_{K=1}^N \text{(KM)&M}$ 考虑第$i$位的贡献, 显然为$\lfloor\frac{KM}{2^i}\rfloor$为 ...
- （转） [组合数学] 第一类，第二类Stirling数，Bell数
一.第二类Stirling数 定理:第二类Stirling数S(p,k)计数的是把p元素集合划分到k个不可区分的盒子里且没有空盒子的划分个数. 证明:元素在哪些盒子并不重要,唯一重要的是各个盒子里装的 ...
- 利用RabbitMQ实现分布式事务
实现要点:1.构建本地消息表及定时任务,确保消息可靠发送:2.RabbitMQ可靠消费:3.redis保证幂等 两个服务:订单服务和消息服务 订单服务消息可靠发送 使用springboot构建项目,相 ...
- Linux判断SSD或HDD + 模拟SSD
判断方法 方法一 判断cat /sys/block/*/queue/rotational的返回值(其中*为你的硬盘设备名称,例如sda等等),如果返回1则表示磁盘可旋转(HDD),返回0,则表示磁盘不 ...
- linux环境，hidraw设备自动加载时默认权限的设置方法
在linux系统中,hidraw设备会自动加载并设置默认权限,但系统的默认只允许root用户访问,普通用户是不允许读写. 设置的方法是修改udev的配置,配置路径是/etc/udev/rules.d/ ...
- IntelliJ IDEA.2017.3.4（win7 64位）的安装使用
下载 1.Idea与Webstorm同为JetBrains公司的产品,因此安装使用方式也极为相似,首先我们打开IDEA的官方下载网站:https://www.jetbrains.com/idea/,点 ...
- js中的深复制与浅复制
前言 所谓深复制与浅复制(深拷贝与浅拷贝),乍一听感觉听高大上,像是一个非常难理解的概念,其实我们平常项目开发都是在用的,只是你可能不知道该怎么叫它的名字而已,就像你听熟了一首歌,就是不知道这首歌叫什 ...