css---2D变形
1.transfrom:rotate(360deg); 用前要加transition: 2s; deg重点
transform:rotate(angle);
正值:顺时针旋转 rotate(360deg)
负值:逆时针旋转 rotate(-360deg)
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转
transform: rotate(360deg);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 20px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform: rotate(360deg);
} </style> </head>
<body>
<div id="test">
transform
</div>
</body>
</html>
tansation：rotate
X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二维平移：transform: translate(tx[, ty])； 如果ty没有指定，它的值默认为0。
可设单值，也可设双值。
正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，
例如transform: translate(100px);等价于transform: translate(100px,0);
transform:translateX(300px);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 15px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform:translateX(300px);
} </style> </head>
<body>
<div id="test">
transform:translateX(300px);
</div>
</body>
</html>
tranlateX
倾斜 skew
X方向倾斜:transform: skewX(angle)
skewX(45deg):参数值以deg为单位 代表与y轴之间的角度
Y方向倾斜:transform: skewY(angle)
skewY(45deg):参数值以deg为单位 代表与x轴之间的角度
二维倾斜:transform: skew(ax[, ay]); 如果ay未提供，在Y轴上没有倾斜
skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度
第二个参数代表与x轴之间的角度
单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于 transform: skew(30deg, 0);
考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示 只Y轴扭曲，X轴不变
正值:拉正斜杠方向的两个角
负值:拉反斜杠方向的两个角
transform:skewX(45deg);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 15px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform:skewX(45deg);
} </style> </head>
<body>
<div id="test">
transform:skewX(45deg);
</div>
</body>
</html>
Skew
缩放Scale
transform:scale(2);
X方向缩放:transform: scaleX(sx);
Y方向缩放:transform: scaleY(sy);
二维缩放 :transform: scale(sx[, sy]); (如果sy 未指定，默认认为和sx的值相同)
要缩小请设0.01～0.99之间的值，要放大请设超过1的值。
例如缩小一倍可以transform: scale(.5);
放大一倍可以transform: scale(2);
如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。
同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)
正值:缩放的程度
负值:不推荐使用（有旋转效果）
单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);等价于transform: scale(2,2);
transform:scale();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 15px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform:scale();
} </style> </head>
<body>
<div id="test">
transform:scale();
</div>
</body>
</html>
scale
基点的转换 transform-origin:left top;
transform-origin: left top;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 15px/100px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s;
transform-origin: left top; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform:rotate(360DEG);
} </style> </head>
<body>
<div id="test">
transform-origin: left top;基点转换
</div>
</body>
</html>
transform-origin
css---2D变形的更多相关文章
- CSS 2D 转换
通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...
- 【CSS3练习】transform 2d变形实例练习
transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- css3的2D变形
一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...
- CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
- 1+X证书学习日志——css 2D&过渡
css 位移常用属性 transform:translate(x,y): transform:translateX(); transform:translateY(); 旋转属性 2d旋转: tran ...
- css 2D转换 transform-rotate 画插图
学习了一点2D转换,关于Transfrom-rotate的小用法 rotate()方法,在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. 下面看实例 第一个例子是没有使用rotat ...
- css 2D转换总结
CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转 ...
- CSS 2D转换
转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...
- css之变形（transform）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Linux操作基础
摘要 一.Linux操作系统概述 二.Linux操作系统安装 三.Linux文件系统及文件基础 四.Linux操作系统命令使用基础 五.Linux应用程序的安装与卸载基础 五.用户及进程 六.相关信息 ...
- Warshall算法和Floyd算法
不用说这两位都是冷门算法……毕竟O(n^3)的时间复杂度算法在算法竞赛里基本算是被淘汰了……而且也没有在这个算法上继续衍生出其他的算法… 有兴趣的话:click here.. 话说学离散的时候曾经有个 ...
- arguments的使用
当我们不确定有多少参数传递的时候,可以使用 arguments 来获取,在 JavaScript 中, arguments 实际上它是当前函数的一个内置对象. 所有的函数都内置了一个 argument ...
- 2018-8-10-wpf-DoEvents-
title author date CreateTime categories wpf DoEvents lindexi 2018-08-10 19:16:51 +0800 2018-2-13 17: ...
- python 编写暴力破解mysql用户名密码
本文摘自别人的,自己运行调试了一下#!/user/bin/env python#-*- coding:utf-8 -*- import pymysql#导入连接数据库的模块import sys cla ...
- vue 外卖app(3) 引入阿里图标
1.登陆阿里图标官网 2.点击搜索按钮,输入你想要搜索的图标,加入购物车,保存到项目中 3.在项目中使用
- JavaScript ---- 闭包（什么是闭包，为什么使用闭包，闭包的作用）
经常被问到什么是闭包? 说实话闭包这个概念很难解释.JavaScript权威指南里有这么一段话:“JavaScript函数是将要执行的代码以及执行这些代码作用域构成的一个综合体.在计算机学术语里,这种 ...
- 46 python学习笔记
0 引言 之前用python跑过深度学习的代码,用过一段时间的jupiter和tensorflow:最近在Ubuntu下搭建起了VSCode + Anaconda的python开发环境,感觉很好用,尤 ...
- 在myeclipse安装beyond插件
目录 文章背景 目录 环境介绍 安装步骤 说明 参考文章 版本记录 文章背景 myeclipse自带的比较工具感觉是有一些看不清晰,也不是太方便处理,然后就找了个比较插件了. 目录 环境介绍 myec ...
- kafka-manager监控工具的安装和使用
kafka-manager监控工具的使用 第一步:对kafkamanager进行下载并编译 此步骤略:可参照成功与否不详,https://www.jianshu.com/p/174b6eb10d9d ...