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. hdu 1867 kmp匹配

    #include<stdio.h> #include<string.h> #define N 100100 void getnext(int next[],char s[]) ...

  2. 【BZOJ2342】双倍回文（manacher，并查集）

    题意: 思路:From http://blog.sina.com.cn/s/blog_8d5d2f04010196bh.html 首先我可以看出: (1)我们找到的串的本身也是一个回文串(显然) (2 ...

  3. - > 动规讲解基础讲解四——矩阵取数

    给定一个m行n列的矩阵,矩阵每个元素是一个正整数,你现在在左上角(第一行第一列),你需要走到右下角(第m行,第n列),每次只能朝右或者下走到相邻的位置,不能走出矩阵.走过的数的总和作为你的得分,求最大 ...

  4. 【Storage】IBM DS8100开机及配置过程

     ************************************************************************ ****原文:blog.csdn.net/cla ...

  5. VMware 9 安装 Mac OS X 10.8 Mountain Lion 图文全程

    http://unmi.cc/vmware9-install-mac-os-x-mountain-lion 非常详细,赞一下 本教程是在 VMware 9 下安装当前最新版的 Mac OS X Mou ...

  6. oc67--NSString1

    // // main.m // NSString基本概念 // Foundation框架,苹果有80多个框架,Foundation有125个头文件. #import <Foundation/Fo ...

  7. Git:代码冲突常见解决方法【转】

    本文转载自:http://blog.csdn.net/iefreer/article/details/7679631 如果系统中有一些配置文件在服务器上做了配置修改,然后后续开发又新添加一些配置项的时 ...

  8. openstack 杂记 备忘002

  9. explain 详解 （转）

    原文:http://blog.csdn.net/zhuxineli/article/details/14455029 explain显示了MySQL如何使用索引来处理select语句以及连接表.可以帮 ...

  10. PCB OD工具破解实例应用

    以下破解Genesis为例,对OD工具使用进行实例讲解 工具简单 介绍下下载地址: OD工具:是一个新的动态追踪工具,将IDA与SoftICE结合起来的思想,Ring 3级调试器, 是为当今最为流行的 ...