<!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. android CMakeLists

    https://developer.android.google.cn/studio/projects/configure-cmake https://blog.csdn.net/songmingzh ...

  2. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  3. Total Difference String

    Total Difference Strings 给一个string列表,判断有多少个不同的string,返回个数相同的定义:字符串长度相等并从左到右,或从右往左是同样的字符 abc 和 cba 为视 ...

  4. 04: python常用模块

    目录: 1.1 时间模块time() 与 datetime() 1.2 random()模块 1.3 os模块 1.4 sys模块 1.5 tarfile用于将文件夹归档成 .tar的文件 1.6 s ...

  5. bzoj 1179 [APIO 2009]Atm(APIO水题) - Tarjan - spfa

    Input 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路的起点和终点的路口编号.接下来N行,每行一 ...

  6. Linux系统编程之--守护进程的创建和详解【转】

    本文转载自:http://www.cnblogs.com/mickole/p/3188321.html 一,守护进程概述 Linux Daemon(守护进程)是运行在后台的一种特殊进程.它独立于控制终 ...

  7. Git 基础 —— 常用命令

    Git 基础学习系列 Git 基础 -- 安装 配置 别名 对象 Git 基础 -- 常用命令 Git 基础 -- 常见使用场景 Git基础 -- Github 的使用 git init 创建 Git ...

  8. Nmap从探测到漏洞利用备忘录 – Nmap简介(一)

    在侦查期间,扫描一直是信息收集的初始阶段. 什么是侦查 侦查是尽可能多收集关于目标网络的信息.从黑客的角度来看,信息收集对于一次攻击非常有用,所以为了封锁恶意的企图,渗透测试者通常尽力查找这些信息,发 ...

  9. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  10. 【Python】【上下文管理器】

    """#[备注]#1⃣️try :仅当try块中没有异常抛出时才运行else块.#2⃣️for:仅当for循环运行完毕(即for循环没有被break语句终止)才运行els ...