<!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. MySQL Crash Course #04# Chapter 7. 8 AND. OR. IN. NOT. LIKE

    索引 AND. OR 运算顺序 IN Operator VS. OR NOT 在 MySQL 中的表现 LIKE 之注意事项 运用通配符的技巧 Understanding Order of Evalu ...

  2. 20145337 《网络对抗技术》Web基础

    20145337 <网络对抗技术>Web基础 一.实验后回答问题 什么是表单? 表单是HTML的一个重要部分,主要用于将用户输入的信息提交到服务器.如果是普通的HTML页面,则当浏览器提出 ...

  3. 【javascript】数据结构-链表

    // 创建一个链表 function LinkedList(){ // 创建一个Node辅助类,表示需要加入列表的项,它包含一个element属性,即表示需要加入到列表中的值,next属性表示指向下一 ...

  4. Python3基础 if else 格式 输入一个整数并判断是8吗

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

  5. spring注解注入properties配置文件

    早期,如果需要通过spring读取properties文件中的配置信息,都需要在XML文件中配置文件读取方式. 基于XML的读取方式: <bean class="org.springf ...

  6. LOJ #10222. 「一本通 6.5 例 4」佳佳的 Fibonacci

    题目链接 题目大意 $$F[i]=F[i-1]+F[i-2]\ (\ F[1]=1\ ,\ F[2]=1\ )$$ $$T[i]=F[1]+2F[2]+3F[3]+...+nF[n]$$ 求$T[n] ...

  7. 用 SwitchHosts设置hotst， 用法示例

    涉及到本地默认ip(localhost,127.0.0.1)设置关联地址时,使用XAMPP本地服务器时避免自动跳转设置的域名的一些处理方法 打开此文件,把内容修改如下 # Virtual Hosts# ...

  8. [shiro] - 加入rememberMe功能

    shiro不加入rememberMe没事,一加入就出错. RememberMeAuthenticationToken : public interface RememberMeAuthenticati ...

  9. [JVM] - 不就是JVM么 JVM的继续探究

    前面几章跟着作者的脚步实现了使用Go语言查看java的.class文件源码(16进制) 复习一下: 相比Java语言,Go的访问控制非常简单,只有公开和私有两种. 所有首字母大写的类型, 结构体,字段 ...

  10. socket编程时使用了inet_ntoa函数，存储到链表中的数据总是自动改变

    这和inet_ntoa的返回值有关系: 函数声明:char *inet_ntoa (struct in_addr); 返回点分十进制的字符串在静态内存中的指针. 所在头文件:<arpa/inet ...