2D变换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
overflow: hidden; }
body{
height: 60%;
width: 60%;
border: 1px solid;
margin: 100px auto;
overflow: hidden; }
#test{
height: 200px;
width: 200px;
border-radius: 50%;
border: 1px solid;
position: absolute;
font: 40px/200px "微软雅黑";
text-align: center; top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
body:hover #test{
/*transform: translate(300px,300px);*/
/*transform: scaleX(1.5);*/
transform: rotate(130deg);
}
/*
1、translate(x,y):
左右移动，单位是px,有两个值，
x，y 表示左/右，上/下
一个值的时候表示x值,
transform: translate(300px,300px);
表示右下方向移动
translateX(x) 定义X轴的
translateY(y)定义Y轴的
2、scale(x,y) 定义2D缩放转换
无单位，数字表示，数字代表缩放多少倍
如果只填一个值的时候，代表了x和y值一样，赋予了两个值
transform: scaleX(1.5) 代表X和Y都是放大1.5倍，如果要缩小，则改为负数
scaleX(x) 代表通过设置 X 轴的值来定义缩放转换 缩放X轴的转换
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 缩放Y轴的转换
3、rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate(<a> [<x> <y>])变换函数指定由旋转a给定旋转度数
如果可选参数x，并y没有提供，则旋转是当前用户的坐标系的原点（就是中心点）。
如果可选参数x和y提供的，该旋转是关于点(x, y)。
4、skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
注意：
变换组合时，计算方向是从右往左进行继续的（这时候是用矩阵去计算的） * */
</style>
<body>
<div id="test">
Rainbow
</div>
</body>
</html>
2D变换的更多相关文章
- css3 过渡和2d变换——回顾
1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...
- 2017/11/25 2D变换
2D变换 一.盒模型解析模式 1.box-sizing:盒模型解析模式 1)content-box:标准盒模型(和css2一样的计算) 宽度和高度之外绘制元素的内边距和边框 width,height外 ...
- 背水一战 Windows 10 (71) - 控件（控件基类）: UIElement - RenderTransform（2D变换）, Clip（剪裁）
[源码下载] 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁) 作者:webabcd 介绍背水一 ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- CSS3 2D 变换
CSS2D transform 表示2D变换,目前获得了各主流浏览器的支持,是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,可以取代大量之前只能靠Flash才 ...
- css3的transform ，2D变换
transformtransform的中文翻译就是变换,改变,改观,转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变. 他的属性(变换方式)有:平移,旋转,缩放,扭曲transla ...
- CSS3之过渡及2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...
- 关于CSS3的小知识点之2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形 ...
- css3 -- 2D变换
1.transform 1 E{ 2 -moz-transform:function(value): 3 -ms-transform:function(value): 4 -o-transform:f ...
随机推荐
- 20145209刘一阳《JAVA程序设计》第九周课堂测试
第九周课堂测试 1.域名解析服务器(ARP)负责将域名转化为IP地址,从而与主机连接.(B) A .true B .false 2.下列关于URL类的说法,正确的是(BD) A .URL 类自身可根据 ...
- RabbitMQ(一):Window安装RabbitMQ
原文:RabbitMQ(一):Window安装RabbitMQ 1.安装ERLANG语言环境 由于RabbitMQ是采用Erlang编写的,因此我们需要先安装该语言库,以便运行代理服务器.从Erlan ...
- HBase数据模型的一些概念
首先来先理解一个概念:HBase是一种列式存储的分布式数据库. 表 在HBase中数据以表的形式存储.使用表的主要原因是把某些列组织起来一起访问,同一个表中的数据通常是相关的 ...
- flag -- 诡异的memcache标记
引子 打从去年一路北漂,进入无人货架行业,业务需求漫天飘,最近总算把工作都规划齐整.回望过去一年多的时间里,诸多东西值得整理,memcache就是其中一个. 看到java的工资高些,队伍中好 ...
- node.js学习笔记——前序
一.什么是node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一 ...
- FileCopy方法
复制文件. 语法 FileCopy源,目标 FileCopy 语句语法包含以下命名参数: 部分 说明 source 必需. 指定要复制的文件的名称的字符串表达式. _源_可能包含目录或文件夹,和驱动器 ...
- Jenkins远程测试
Jenkins远程测试 网络测试,如,selenium 测试可以通过主从和 selenium 套件插件远程安装在机器上运行.下列步骤显示了如何运行使用此配置来进行远程测试. 第1步 - 确保主从配置到 ...
- ubuntu lvm模式进行扩容
ubuntu的16.04 18.04有lvm的功能(安装的时候的选项),能在磁盘空间用完的时候,无缝增加一个磁盘进去.因为linux系统只有一个盘,所以是非常方便,不会有windows加1个磁盘要进行 ...
- GitHub笔记（五）——忽略文件、配置别名、搭建服务器
六.忽略文件 忽略某些文件时,需要编写.gitignore: .gitignore文件本身要放到版本库里,并且可以对.gitignore做版本管理! 忽略文件的原则是: 忽略操作系统自动生成的文件,比 ...
- Netty源码分析第3章(客户端接入流程)---->第4节: NioSocketChannel注册到selector
Netty源码分析第三章: 客户端接入流程 第四节: NioSocketChannel注册到selector 我们回到最初的NioMessageUnsafe的read()方法: public void ...