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. P3383 【模板】线性筛素数 洛谷

    https://www.luogu.org/problem/show?pid=3383#sub 题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输 ...

  2. BZOJ(6) 1084: [SCOI2005]最大子矩阵

    1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3566  Solved: 1785[Submit][Sta ...

  3. jq 笔记

    http://bbs.miaov.com/forum.php?mod=forumdisplay&fid=40 2014.10.10jquery 2.0 不兼容ie 6 7 8,以上更适合做移动 ...

  4. Arduino程序-光敏电阻

    尽管造书去做的.但还是有莫名的成就感 从串口显示出,电压变化, void setup() {   // put your setup code here, to run once:   Serial. ...

  5. iconfont 不居中的问题

    引用 阿里的 iconfont 发现跟我的文字不居中 页面中实际展示的时候,发现 iconfont 字体飘起来了 原因是:iconfont 的基线跟 文字 的基线不同导致的. 解决办法:给 iconf ...

  6. C++中的继承与虚函数各种概念

    虚继承与一般继承 虚继承和一般的继承不同,一般的继承,在目前大多数的C++编译器实现的对象模型中,派生类对象会直接包含基类对象的字段.而虚继承的情况,派生类对象不会直接包含基类对象的字段,而是通过一个 ...

  7. 桌面系统集成WEB认证系统方案

    最近做的一个项目,有WEB版.WPF版.手机版.领导想集成集团的一个现成的认证系统,姑且称这个认证系统名为 W4认证系统. W4认证系统有如下特点: 1.现成的 2.是个单点登录系统 3.不支持oAu ...

  8. c++ 编译器会绕过拷贝构造函数

    C++ primer P442 P447:在拷贝初始化过程中,编译器可以跳过拷贝构造函数,直接创建对象.即,编译器允许将下面的代码 "; //1 改写为 "); //2 由于str ...

  9. B1277 [HNOI2002]Tinux系统 树形dp

    这个题bzoj上没有图,luogu上样例有问题...其实这个题代码不难,但是思考起来还是有一定难度的,其实这些题的重点都在于思考.我就不写了,洛谷上唯一的题解写的挺好,大家可以看一看. 题干: 在do ...

  10. stm32I/O的8种工作模式

    转载自原子的论坛: 浮空,顾名思义就是浮在空中,上面用绳子一拉就上去了,下面用绳子一拉就沉下去了. 开漏,就等于输出口接了个NPN三极管,并且只接了e,b. c极 是开路的,你可以接一个电阻到3.3V ...