transform 属性

1、向元素应用 2D 或 3D 转换

2、该属性允许我们对元素进行旋转、缩放、移动或倾斜。

缩放与位移

transform: scale(, 0.5);//水平缩放,垂直缩放
transform: translate(150px, 150px);//水平位移(正值向右负值向左),垂直位移(正值向下负值向上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 480px;
height: 400px;
margin: 150px auto;
} .box > div {
width: 200px;
height: 200px;
float: left;
margin: 0 10px;
background-color: red;
transition: all 1s;
} .box1:hover {
/*水平缩放,垂直缩放*/
transform: scale(2, 0.5);
} .box2:hover {
/*水平位移,垂直位移*/
transform: translate(150px, 150px);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 50%;
top: 50px;
transform: translate(-50%);
}
</style>
</head>
<body>
<div>定位居中</div>
</body>
</html>

角度旋转

transform:rotate(-945deg);//正值顺时针,负值逆时针
transform-origin: 50px 50px;//水平坐标,垂直坐标
transform-origin: % %;//水平坐标,垂直坐标
transform-origin: center bottom;//水平坐标,垂直坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
background-color: #ccc;
} p {
margin-top: 20px;
text-align: center;
font-size: 50px;
color: red;
} .box {
width: 300px;
height: 450px;
margin: 70px auto;
position: relative;
} .box > div {
width: 100%;
height: 100%;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
font-size: 30px;
transform-origin: center bottom;
transition: all 1s;
box-shadow: 0 0 3px 1px #666;
} .box:hover .p1:nth-child(6) {
transform: rotate(-10deg);
} .box:hover .p1:nth-child(5) {
transform: rotate(-20deg);
} .box:hover .p1:nth-child(4) {
transform: rotate(-30deg);
} .box:hover .p1:nth-child(3) {
transform: rotate(-40deg);
} .box:hover .p1:nth-child(2) {
transform: rotate(-50deg);
} .box:hover .p1:nth-child(1) {
transform: rotate(-60deg);
} .box:hover .p1:nth-child(8) {
transform: rotate(10deg);
} .box:hover .p1:nth-child(9) {
transform: rotate(20deg);
} .box:hover .p1:nth-child(10) {
transform: rotate(30deg);
} .box:hover .p1:nth-child(11) {
transform: rotate(40deg);
} .box:hover .p1:nth-child(12) {
transform: rotate(50deg);
} .box:hover .p1:nth-child(13) {
transform: rotate(60deg);
}
</style>
</head>
<body>
<p>派克牌摊开</p>
<div class="box">
<div class="p1">1</div>
<div class="p1">2</div>
<div class="p1">3</div>
<div class="p1">4</div>
<div class="p1">5</div>
<div class="p1">6</div>
<div class="p1">7</div>
<div class="p1">8</div>
<div class="p1">9</div>
<div class="p1">10</div>
<div class="p1">11</div>
<div class="p1">12</div>
<div class="p1">13</div>
</div>
</body>
</html>

倾斜

skew(deg, deg):可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0

html5——2D转换的更多相关文章

  1. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  2. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  3. css3之2D转换

    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...

  4. CSS3 2D 转换

    2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { tra ...

  5. css3的2D转换

    CSS3的2D转换用transform来实现 1.rotate()   /*通过 rotate() 方法,元素顺时针旋转给定的角度.允许负值,元素将逆时针旋转.*/ 2.scal()   /*通过 s ...

  6. CSS 2D转换 matrix() 详解

    2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收 ...

  7. css3学习总结7--CSS3 2D转换

    CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D 转换 在本次,您将学到如下 2D 转换方法: 1. translate() 2. rotate() 3. ...

  8. css3学习笔记之2D转换

    translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  9. 初识phaser框架——开源的HTML5 2D游戏开发框架

    背景: 在网上看到,65行实现flappy bird,感到很好奇.原来是使用开源的2D游戏框架 phaser开发的. 什么是phaser2D游戏开发框架呢? 借鉴与网上的资料: 1.    Phase ...

随机推荐

  1. [bzoj2038][2009国家集训队]小Z的袜子(hose)_莫队

    小Z的袜子 hose 2009-国家集训队 bzoj-2038 题目大意:给定一个n个袜子的序列,每个袜子有一个颜色.m次询问:每次询问一段区间中每种颜色袜子个数的平方和. 注释:$1\le n,m\ ...

  2. HDU 1166敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  3. JavaSE学习笔记--Item1 注解Annotation

    从 JDK 5.0 開始, Java 添加了对元数据(MetaData) 的支持, 也就是 Annotation(注解). 什么是Annotation,以及注解的作用? 三个主要的 Annotatio ...

  4. unity3d杂记

    由于公司用unity3d开发客户端部分,今天去参加了下unity3d成都开发者大会.在这里简单记录一下会议里关于unity3d的内容. 说到unity3d,第一次知道的时候也是大概3年前的事情.这几年 ...

  5. 具体解释clone函数

    我们都知道linux中创建新进程是系统调用fork,但实际上fork是clone功能的一部分,clone和fork的主要差别是传递了几个參数.clone隶属于libc.它的意义就是实现线程. 看一下c ...

  6. Unix/Linux环境C编程新手教程(40) 初识文件操作

     1.函数介绍 close(关闭文件) 相关函数 open,fcntl,shutdown.unlink,fclose 表头文件 #include<unistd.h> 定义函数 int ...

  7. 防遗忘笔记,Fedora交叉编译window下的virt-iewer的汉化

    1. 汉化代码里的资源 virtviewer使用的是gettex的方案是标准的linux里国际化的方案.按道理仅仅须要改动virtualviewer/po/zh_CN.po的文件. 编译. 然后确认在 ...

  8. Codeforces Round #272 (Div. 2) Dreamoon and WiFi 暴力

    B. Dreamoon and WiFi Dreamoon is standing at the position 0 on a number line. Drazil is sending a li ...

  9. codeforces round #427 div2

    A:读懂题,乘一下判断大小就行了 #include<bits/stdc++.h> using namespace std; int main() { int s, v1, v2, t1, ...

  10. 使用display:flex;实现两栏布局和三栏布局

    一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...