CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform)
2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有:移动(translate)、缩放(scale)、旋转(rotate)、倾斜 (skew)。
一、2D变形语法
1、移动 (translate)
移动的属性: translate
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
比如设置为:
transform: translate(50px,60px); /* 水平向右移动50px 和 垂直向下移动60px*/
运行结果
说明 从上面运行结果可以看出两点
1、移动的原点默认是 最左角上 的位置。
2、px取正数代表 向右 或者 向下。Px为负值,那就变成向左 或者 向上。
2、缩放 (scale)
缩放的属性: scale
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
说明 scale默认值为1,设置0.5代表缩小一倍,2代表放大一倍。
比如设置为:
transform: scale(0.5,1); /* 水平缩小0.5倍 和 垂直不变 */
运行结果
3、旋转 (rotate）
旋转属性 : rotate (正值为顺时针，负值为逆时针)
比如设置为:
transform: rotate(45deg); /* 注意单位是 deg 度数 */
运行结果
我们可以看到这里旋转默认是以对角线的位置进行旋转，这里也可以设置以其它位置进行旋转。
调整元素转换变形的原点属性：transform-origin
div {transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
/*如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素*/
div {transform-origin: 10px 10px;transform: rotate(45deg); } /* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */
4、倾斜 (skew)
旋转属性 : rotate (正值为顺时针，负值为逆时针)
比如设置为:
transform: skew(30deg,0deg); /* 水平方向上倾斜30度，垂直方向保持不变 */
运行结果
二、示例
1、移动
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all 1.2s; /*过渡时间1.2秒*/
}
div:hover {
transform: translate(100px, 50px); /*水平移动100px 垂直移动50px*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、缩放
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all 1.2s; /*过渡时间1.2秒*/
}
div:hover {
/*transform: scale(0.8, 1); 0 0% 1 100% 宽度变为了原来的 80% 高度不变*/
/*transform: scale(1, 0.8); 0 0% 1 100% 宽度变为了原来的 80% 高度不变*/
transform: scale(0.5); /* 高度 和 宽度一起缩放 都是 0.5 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3、缩放(新浪图片放大)
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style>
div {
width: 386px;
height: 260px;
overflow: hidden; /*多余部分隐藏*/
}
div img {
transition: all 0.5s; /*设置过渡时间*/
}
div:hover img {
transform: scale(1.1); /*设置放大1.1倍*/
}
</style>
</head>
<body>
<div>
<img src="1.jpg" height="260" width="386" alt="">
</div>
</body>
</html>
4、旋转 (默认原点旋转)
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 0.8s;
}
div:hover {
transform: rotate(45deg); /* 顺时针旋转45度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5、旋转 (指定原点旋转)
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 1.0s;
transform-origin: right bottom; /*设置 旋转中心点为 右下角*/
}
div:hover {
transform: rotate(90deg); /*旋转90度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6、倾斜
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倾斜</title>
<style>
div {
width: 150px;
height: 150px;
margin: 100px auto;
background-color: pink;
transition: all 1.0s
}
div:hover {
transform: skew(30deg); /*倾斜度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
你如果愿意有所作为，就必须有始有终。(17)
```
CSS3(3)---2D变形(transform)的更多相关文章
- css3的2D变形
一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...
- css3中的变形 transform详解
一.变形-旋转 ratate()函数 通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这 个 ...
- 2D变形transform的translate和rotate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3 过渡、变形和动画
一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...
- 【CSS3练习】transform 2d变形实例练习
transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...
- CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
随机推荐
- HDU 5584 LCM Walk【搜索】
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5584 题意: 分析: 这题比赛的时候卡了很久,一直在用数论的方法解决. 其实从终点往前推就可以发现, ...
- qt 利用Qtimer 定时器实现定时消息发送
为了实现给控制器按周期发送控制指令,利用qt中的Qtimer 实现消息的定时发送. 需要进行三步处理: 1.在mainwindow.h文件中对timerEvent进行声明 public virtual ...
- CH1401 兔子与兔子
#include<bits/stdc++.h> using namespace std; ,p=; typedef unsigned long long ULL;//自然溢出 ULL f[ ...
- Kafka数据迁移MaxCompute最佳实践
摘要: 本文向您详细介绍如何使用DataWorks数据同步功能,将Kafka集群上的数据迁移到阿里云MaxCompute大数据计算服务. 前提条件 搭建Kafka集群 进行数据迁移前,您需要保证自己的 ...
- HZOJ 分组
打了好多个代码. 对于测试点1,11:手动模拟. void QJ1_11() { ) { int tk; ]+a[]))tk=; ; if(tk<=k) { puts("); puts ...
- 初识block
我们可以把Block当做Objective-C的匿名函数.Block允许开发者在两个对象之间将任意的语句当做数据进行传递,往往这要比引用定义在别处的函数直观.另外,block的实现具有封闭性(clos ...
- shell awk杂项
awk '{ ;++i<=NF;){ a[i]=a[i]?a[i]",'\''"$i"'\''":"'\''"$i"'\'' ...
- 首次揭秘：阿里巴巴中间件在 Serverless 技术领域的探索
Serverless 话题涉及范围极广,几乎包含了代码管理.测试.发布.运维和扩容等与应用生命周期关联的所有环节.AWS Lambda 是 Serverless 领域的标志性产品,但如果将其应用于核心 ...
- 什么是CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI?
https://mp.weixin.qq.com/s/Co1LxS2h_ILh9syOmshjZg 什么是CGI CGI全称是“公共网关接口”(Common Gateway Interface),HT ...
- 洛谷P5664 Emiya 家今天的饭 问题分析
首先来看一道我编的题: 安娜写宋词 题目背景 洛谷P5664 Emiya 家今天的饭[民间数据] 的简化版本. 题目描述 安娜准备去参加宋词大赛,她一共掌握 \(n\) 个 词牌名 ,并且她的宋词总共 ...