<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>应用多种变形</title>
        <style type="text/css">
        /*基本设置*/

body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/

div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/

ul,li,ol{list-style:none;}/*去除列表符号*/

img{border:none;}/*去除图片按钮边框*/

a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
        div {
            position:absolute;
            width:140px;
            height:140px;
            background-color:#e4105e;
            border:2px solid #000000;
            margin:30px;
        }
          /*.box {
            -moz-transform:rotate(30deg)  translate(260px,60px) scale(2.4,0.4);
            -webkit-transform:rotate(30deg)  translate(260px,60px) scale(2.4,0.4);
            -o-transform:rotate(30deg)  translate(260px,60px) scale(2.4,0.4);
            }*/ /* 该盒子旋转45度；位移100px,30px；缩放2.3,0.3*/

.box {
            -moz-transform:translate(260px,60px) rotate(30deg)  scale(2.4,0.4);
            -webkit-transform:translate(260px,60px) rotate(30deg)  scale(2.4,0.4);
            -o-transform:translate(260px,60px) rotate(30deg)  scale(2.4,0.4);
            }
            /*如果变换的顺序不同，得到的效果也不同*/
            </style>
</head>
<body>
    <div>文字</div>
    <div class="box">文字</div><br />

</body>
</html>

应用多种变形CSS3的更多相关文章

  1. 变形CSS3

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  2. CSS3中的变形处理

    在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...

  3. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  4. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  5. 从零开始学习前端开发 — 14、CSS3变形基础

    一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...

  6. 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...

  7. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  8. CSS3 动画基础

    该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html   译文:你需要知道的CSS3 动画技术 原文:Wha ...

  9. css3的动画

    一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...

随机推荐

  1. SQL学习之SqlMap SQL注入

    sqlmap也是渗透中常用的一个注入工具,其实在注入工具方面,一个sqlmap就足够用了,只要你用的熟,秒杀各种工具,只是一个便捷性问题,sql注入另一方面就是手工党了,这个就另当别论了. 今天把我一 ...

  2. Git 的安装步骤

    Git 的安装步骤 一.下载Git Git 的官网:https://git-scm.com/ 在 Git 的官网中点击Downloads,进入如下页面: 选择对应的操作系统,以博主为例,点击Windo ...

  3. noip 2014 提高组 Day 2

    1.无线网络发射器选址 这道题数据范围很小,就直接暴力枚举就好了.为了提高速度,就从每个有公共场所的点枚举周围在(x,y)放无线网路发射器可以增加的公共场所数量,加到一个数组里.所有公共场所都处理完了 ...

  4. JS ——DOM，BOM（包含盒模型，动画）总结

    JS盒模型 content: 通过计算后样式获取padding + content: box.clientWidth | box.clientHeightborder + padding + cont ...

  5. POJ 3480 John（SJ定理博弈）题解

    题意:n堆石头,拿走最后一块的输 思路:SJ定理:先手必胜当且仅当:(1)游戏的SG函数不为0且游戏中某个单一游戏的SG函数大于1:(2)游戏的SG函数为0且游戏中没有单一游戏的SG函数大于1. 参考 ...

  6. HDU1560 DNA sequence（IDA*）题解

    DNA sequence Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  7. 【自定义IK词典】Elasticsearch之中文分词器插件es-ik的自定义词库

    Elasticsearch之中文分词器插件es-ik 针对一些特殊的词语在分词的时候也需要能够识别 有人会问,那么,例如: 如果我想根据自己的本家姓氏来查询,如zhouls,姓氏“周”.      如 ...

  8. dp问题 -挑战例题 2017-7-24

    01 背包 题意: 在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2……Wn(Wi为整数),与之相对应的价值为P1,P2……Pn(Pi为整数).求背包能够容纳的最大价值. f[i] ...

  9. BZOJ3297: [USACO2011 Open]forgot DP+字符串

    Description 发生了这么多,贝茜已经忘记了她cowtube密码.然而,她记得一些有用的信息.首先,她记得她的密码(记为变 量P)长度为L(1 <= L<=1,000)字符串,并可 ...

  10. UVa 12219 公共表达式消除

    https://vjudge.net/problem/UVA-12219 题意: 用表达式树来表示一个表达式. 思路: 用map来记录出现过的子树.如(b,3,6)表示这棵子树的根为b,左子树为编号为 ...