<!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. Linux下Tomcat端口、进程以及防火墙设置

     Linux下Tomcat端口.进程以及防火墙设置 1,查看tomcat进程: #ps -aux | grep tomcat(或者ps -ef | grep tomcat都行) 可以看到现在运行着两个 ...

  2. 三步搞定 opencv 初始环境设定

    一.设定bin的初始位置:比如我的电脑 D:\安装程序\opencv\build\x86\vc10\bin      H:\生产力工具\opencv\build\x86\vc10\bin D:\安装程 ...

  3. 《网络攻防》实验五：MSF基础应用

    IE浏览器渗透攻击--MS11050安全漏洞 实验准备 1.两台虚拟机,其中一台为kali,一台为Windows Xp Professional(两台虚拟机可以相互间ping通). 2.亚军同学的指导 ...

  4. 20165310 java_blog_week2

    2165310 <Java程序设计>第2周学习总结 教材学习内容总结 了解Java变量 重点学习Boolean变量和类型转换规则 学习数组定义.使用方式 区别: int [] a,b [] ...

  5. cron表达式增加一段时间变为新的表达式

    cron表达式是使用任务调度经常使用的表达式了.对于通常的简单任务,我们只需要一条cron表达式就能满足.但是有的时候任务也可以很复杂. 最近我遇到了一个问题,一条任务在开始的时候要触发A方法,在结束 ...

  6. poj 2369 Permutations - 数论

    We remind that the permutation of some final set is a one-to-one mapping of the set onto itself. Les ...

  7. Linux下指定pip install和make install安装路径

    在Linux下直接用pip install packageName,有些文件会被放到根目录下,如果没有sudo权限的话,是会安装失败的.这个以后我们就需要指定安装的目录了. pip install - ...

  8. C语言通过枚举网卡，API接口可查看man 7 netdevice--获取接口IP地址

    /*代码来自StackOverflow: http://stackoverflow.com/questions/212528/linux-c-get-the-ip-address-of-local-c ...

  9. [TODO]The way to Go(9): 基本类型和运算符

    参考: Github: Go Github: The way to Go 基本类型和运算符 表达式是一种特定的类型的值,它可以由其它的值以及运算符组合而成. 每个类型都定义了可以和自己结合的运算符集合 ...

  10. hdoj-1005-Number Sequences

    题目:Number Sequences 代码: #include<stdlib.h> #include<iostream> #include<cstdio> #in ...