<!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. https的设置

    现有如下的web架构(简化之后的),需要把原来的http访问修改到https访问! haproxy的认证有两种方式: 第一种:haproxy提供ssl证书,后面的nginx访问使用正常的http. 第 ...

  2. Python3.x（windows系统）安装requests库

    Python3.x(windows系统)安装requests库 cmd命令: pip install requests 执行结果:

  3. 20145307陈俊达《网络对抗》Exp 8 Web基础

    20145307陈俊达<网络对抗>Exp 8 Web基础 基础问题回答 1.什么是表单? 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素,表单在网页中主要负责数据采 ...

  4. keil5配置stm32库函数开发

    在将模板文件添加到工程中后, 1.点击魔术棒,选择C/C++,添加头文件的路径: 2.C/C++里面的define内填入:STM32F10X_MD,USE_STDPERIPH_DRIVER: 3.Ou ...

  5. Python3基础 global 使函数中的局部变量升格为全局变量

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. 加强树状数组luogu3368

    暴力树状数组30分,这该怎么办: 知识点回顾 差分数组中 开头结尾改变了值之后 求他的前缀,发现区间内所有数都改变 然后我们做差分树状数组 #include<cstdio> using n ...

  7. HDU1043 Eight（八数码：逆向BFS打表+康托展开）题解

    Eight Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  8. HDU3652 B-number（数位DP）题解

    思路: 这里的状态分为3种,无13和末尾的1,无13且末尾为1,有13,然后DFS 等我搞清楚数位DP就来更新Orz 代码: #include<iostream> #include< ...

  9. 51Nod 1091 线段的重叠(贪心+区间相关

    1091 线段的重叠 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 20]和[12 25]的重叠部分为[12 20]. 给出N条线段的起点和终点,从中选出2条线段,这两 ...

  10. CMD与AMD区别