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. Asm.Def谈笑风生

    ★   输入文件:asm_talk.in   输出文件:asm_talk.out简单对比时间限制:2 s   内存限制:256 MB [题目描述] “人呐都不知道,自己不可以预料,直升机刚一出圣地亚哥 ...

  2. 【Teamviewer】Teamviewer远程访问工具使用方法

    首先电脑必须能访问外网,即使是在局域网内也无所谓. 1.这里以非自动登录.自动受控的方式为例.首先,让对方也安装一个Teamviewer,或运行一个绿色的Teamviewer,并保证网络可通.然后我们 ...

  3. $.getJSON() 未能执行回调函数的缘由

    $.getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据. 语法 1 $.getJSON(url,data,success(data,status,xhr)) url ...

  4. C#程序猿学习 Python

    孙广东  2016.1.1 交互: C# 运行Python代码: http://stackoverflow.com/questions/11779143/run-a-python-script-fro ...

  5. LeetCode 961. N-Repeated Element in Size 2N Array (重复 N 次的元素)

    题目标签:HashMap 题目给了我们一个size 为 2N 的int array,其中有 N + 1 个唯一的 数字,让我们找出那个重复的数字. 利用hashset,把每一个数字存入,一旦发现有重复 ...

  6. react 使用

    我的有道云笔记 React 事件: 1.不能使用 return false; 来阻止元素的默认行为.需要在方法的最前面使用 e.preventDefault() 来阻止元素的默认行为(例如:a 标签的 ...

  7. 模块化开发（二）--- seaJs入门学习

    SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器   [CMD规范](https://github.com/cmdjs/specification/blob/master/draft/mo ...

  8. 递归，迭代，堆栈三种方式实现单链表反转（C++）

    #author by changingivan# 2016.04.12#include <iostream> #include <stack> using namespace ...

  9. 500万url的es 批删除

    bash  循环 算术计算 读写文件 [root@hadoop2 ~]# sh looh.sh1234LIZ1 2 3 4 0 1 2 3 4 5 6 7 8 9 10 0games:x:12:100 ...

  10. XAML实例教程系列 - 开篇（一）

    XAML实例教程系列 - 开篇 2012-05-14 11:47 by jv9, 5588 阅读, 8 评论, 收藏, 编辑 去年,曾答应银光中国论坛的朋友推出一个关于XAML语言实例教程系列,帮助学 ...