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; ...
随机推荐
- PAT(B) 1054 求平均值（Java）
题目链接:1054 求平均值 (20 point(s)) 题目描述 本题的基本要求非常简单:给定 N 个实数,计算它们的平均值.但复杂的是有些输入数据可能是非法的.一个"合法"的输 ...
- FFMPEG - ffplay源代码分析
FFmpeg是一个开源,免费,跨平台的视频和音频流方案,它提供了一套完整的录制.转换以及流化音视频的解决方案.而ffplay是有ffmpeg官方提供的一个基于ffmpeg的简单播放器.学习ffplay ...
- CentOS7安装firewall防火墙
CentOS7之后 , 系统已经推荐了firewall防火墙 , 而不是iptables 主要 : firewall 和 iptables冲突 , 需要禁用其中一个. #停止iptables服务 sy ...
- Linux判断SSD或HDD + 模拟SSD
判断方法 方法一 判断cat /sys/block/*/queue/rotational的返回值(其中*为你的硬盘设备名称,例如sda等等),如果返回1则表示磁盘可旋转(HDD),返回0,则表示磁盘不 ...
- javascript进度条实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- win10+pyspark+pycharm+anaconda单机环境搭建
一.工具准备 1. jdk1.8 2. scala 3. anaconda3 4. spark-2.3.1-bin-hadoop2.7 5. hadoop-2.8.3 6. winutils 7. p ...
- SpringBoot启动流程与源码
一 main方法作为程序的入口,执行SpringApplication.run(),传入参数是启动类的class对象@SpringBootApplication注解 二 run中首先new Sprin ...
- 1+X证书学习日志——盒模型
## padding的作用: 控制子元素和父元素之间的位置关系 padding设置方法: ...
- 【Mybatis】 入门
一.概述 1.1 JDBC 1.2 JDBC编程中问题 1.3 MyBatis介绍 1.4 Mybatis架构 二.MyBatis入门程序 2.1 需求 2.2 引入MyBatis依赖 2.3 配置 ...
- wxpython中设置radiobox相关使用
#coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...