<!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 {
            display:inline-block;
            width:60px;
            height:60px;
            background-color:#e4105e;
            border:2px solid #000000;
            margin:20px;
        }
        .div1 {
        -moz-transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
        -o-transform:rotate(30deg);
        }
        .div2 {
        -moz-transform:translate(100px,-10px);
        -webkit-transform:translate(100px,-10px);
        -o-transform:translate(100px,-10px);
         
        }/*Y负值向上移动，正值向下移动；X负值向左平移，正值向右平移*/
        .div3 {
        -moz-transform:scale(1.9,0.4);
        -webkit-transform:scale(1.9,0.4);
        -o-transform:scale(1.9,0.4);
      
        }
         .div4 {
        -moz-transform:scale(0.3,1.8);
        -webkit-transform:scale(0.3,1.8);
        -o-transform:scale(0.3,1.8)
        }
           .div5 {
        -moz-transform:scale(1.8);
        -webkit-transform:scale(1.8);
        -o-transform:scale(1.8);
        margin-left:60px;
        }
        .div6 {
        -moz-transform:skewX(30deg);
        -webkit-transform:skewX(30deg);
        -o-transform:skewX(30deg);
        }
        .div7 {
        -moz-transform:skewY(30deg);
        -webkit-transform:skewY(30deg);
        -o-transform:skewY(30deg)
        }
         .div8 {
        -moz-transform:skew(10deg,40deg);
        -webkit-transform:skew(10deg,40deg);
        -o-transform:skew(10deg,40deg)
        }
    </style>
</head>
<body>
    <div>文字</div>未变形<div>文字</div><br />
    <div>文字</div>旋转30度<div class="div1">文字</div><br />
    <div>文字</div>位移100px,-10px<div class="div2">文字</div><br />
     <div>文字</div>缩放1.9,0.5<div class="div3">文字</div><br />
    <div>文字</div>缩放0.3,1.8<div class="div4">文字</div><br />
    <div>文字</div>缩放1.8<div class="div5">文字</div><br />
    <div>文字</div>倾斜X轴30度<div class="div6">文字</div><br />
    <div>文字</div>倾斜Y轴30度<div class="div7">文字7</div><br />
    <div>文字</div>倾斜X10度,倾斜Y40度<div class="div8">文字8</div><br />
</body>
</html>

变形CSS3的更多相关文章

  1. 应用多种变形CSS3

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

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

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

  3. css3的动画

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

  4. css3制作网页动画

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

  5. css知识总结

    ---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

  6. 2018-5 - 凉经 - Mozilla Firefox Ltd - 前端工程师

    北京谋智火狐信息技术有限公司(北京市东城区建国门华润大厦 17 层)过去面试的时候感觉电梯好神奇啊!一边的电梯是直达 18 层以上的,我按了 18 层准备到了再往下走一层,一个老司机和我说要做另一边的 ...

  7. transition过渡2D、3D效果

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 帧动画:通过一帧 ...

  8. CSS3变形记(上)：千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

  9. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

随机推荐

  1. Spring IOC 源码分析

    Spring 最重要的概念是 IOC 和 AOP,本篇文章其实就是要带领大家来分析下 Spring 的 IOC 容器.既然大家平时都要用到 Spring,怎么可以不好好了解 Spring 呢?阅读本文 ...

  2. 如何用tomcat发布自己的Java项目

    如何用tomcat发布自己的Java项目 tomcat是什么?它是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器.我们用Java开发出来的web项目,通过tomcat发布出来,别人就可 ...

  3. 基础知识 - Golang 中的格式化输入输出

    ------------------------------------------------------------ [格式化输出] // 格式化输出:将 arg 列表中的 arg 转换为字符串输 ...

  4. 2018-2019-1 1723《程序设计与数据结构》第3&4周作业 总结

    作业要求 第三周作业: 提交情况如图: 第四周作业: 提交情况如图: 作业问题 1.问题总结方面希望大家的解决过程不要完全复制百度出来的或者其他博客的内容.因为很明显,没有自己的思考过程.可以先把参考 ...

  5. 'telnet'不是内部或外部命令，怎么办？

    ['telnet'不是内部或外部命令,也不是可运行的程序或批处理文件]当你想用telnet命令时,发现提示这句话怎么办?其实很简单,接下来为大家介绍下如何使用 1. 一般只有windows7才会出现这 ...

  6. SQLException: com.mchange.v2.c3p0.ComboPooledDataSource [ java.beans.IntrospectionException: java.lang.reflect.InvocationTargetException [numThreadsAwaitingCheckoutDefaultUser] ] has been closed()

    问题:Could not get JDBC Connection; nested exception is java.sql.SQLException: com.mchange.v2.c3p0.Com ...

  7. 计算TCP链接的RTO超时重传时间

  8. BZOJ 2594 水管局长数据加强版（动态树）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2594 题意:给出一个无向图,边有权值.定义一条路径的长度为该路径所有边的最大值.两种操作 ...

  9. 标准IO与文件IO 的区别【转】

    本文转载自:http://blog.sina.com.cn/s/blog_63f31f3401013jrn.html 先来了解下什么是标准IO以及文件IO. 标准IO:标准I/O是ANSI C建立的一 ...

  10. fhq treap抄袭笔记

    目录 碎碎念 点一下 注意!!! 模板 fhq treap 碎碎念 我咋感觉合并这么像左偏树呢 ps:难道你们的treap都是小头堆的吗 fhq真的是神人 现在看以前学的splay是有点恶心,尤其是压 ...