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. 实用型的DJANGO ORM

    比较深入一点的内容,需要用时,用心看看. URL: https://www.sitepoint.com/doing-more-with-your-django-models/ https://www. ...

  2. kendo中需要kendo.default.min.css

    kendo中需要kendo.default.min.css,这个默认是没有加入头文件的,还是需要手动加入一下 <link href="~/Scripts/kendo/styles/ke ...

  3. PHP中错误与异常的日志记录用法分析

    原文:http://www.jb51.net/article/89548.htm ----------------------------------------------------------- ...

  4. Linux Rsync实现文件同步备份（转载）

    原文地址:Linux Rsync实现文件同步备份作者:夷北 转自:http://www.mike.org.cn/blog/index.php?load=read&id=639###pp=0 [ ...

  5. Hibernate插入错误：GenericJDBCException: could not insert:

    数据库中一般不能建立user(表名为User)表,将User类改名,又一次建立映射,问题就能够解决 当然,还有还有一种情况.就是类中id类型错误.要设置为Integer型才干够设置自己主动增长,否则也 ...

  6. Linux下Java线程具体监控和其dump的分析使用----分析Java性能瓶颈[张振华-Jack]

    作者:张振华(Jack) 这里对linux下.sun(oracle) JDK的线程资源占用问题的查找步骤做一个小结: linux环境下,当发现java进程占用CPU资源非常高,且又要想更进一步查出哪一 ...

  7. Vim 经常使用快捷键及键盘图

    Vim经常使用的快捷键 h - 光标左移一个字符   j - 光标下移一个字符 k - 光标上移一个字符   l - 光标右移一个字符  下移15行 - 15j Ctrl + f - 屏幕向下移动一页 ...

  8. Why is processing a sorted array faster than an unsorted array(Stackoverflow)

    What is Branch Prediction? Consider a railroad junction: Image by Mecanismo, via Wikimedia Commons. ...

  9. shell中获取时间，作为文件夹格式

    近期写了一个小程序,须要用到时间.遍历作为文件夹的一部分 #!/bin/bash for i in {1..30} do date=`date +%Y/%m/%d -d " $i days ...

  10. shell 字符串拼接 获取自身文件名 日志记录

    shell  字符串拼接 获取自身文件名 日志记录 [root@hadoop2 xiaole_chk_url]# sh a.sh123.loga.sh[root@hadoop2 xiaole_chk_ ...