<!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. HTML 语义化标签-新增标签介绍

    HTML 基础知识 版权声明:未经博主授权,内容严禁转载 ! HTML语义化标签概念 如果没有语义化标签,上面这些 div 都是没有实际意义的,只是我们提供给浏览器的指令. 和 语义化 代码对比: 什 ...

  2. iotop监控磁盘动态安装

    开始装iotp tar xvf iotop-0.3.1.tar.gz 用python安装(如果没有蟒蛇, yum一个吧) cd iotop-0.3.1 python setup.py build py ...

  3. 20145310《网络对抗》逆向及Bof基础

    实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...

  4. uboot 网络驱动模型

    原文:https://blog.csdn.net/zhouxinlin2009/article/details/45390065 UBOOT的PHYCHIP配置 PHYCHIP的配置位于 includ ...

  5. win10 系统变量迁移

    经常要重装电脑,自己的很多配置都要重新手动配置,其中就包括系统变量 系统变量在注册表中存在 win+R regedit HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\ ...

  6. 论文笔记——SQUEEZENET ALEXNET-LEVEL ACCURACY WITH 50X FEWER PARAMETERS AND <0.5MB MODEL SIZE

    论文地址:https://arxiv.org/abs/1602.07360 模型地址:https://github.com/DeepScale/SqueezeNet 1. 论文思想 提出一种新的卷积组 ...

  7. C#学习笔记（四）：switch语句

    条件语句 switch语句快速生成枚举方法,复制枚举名在switch()里,双击TAB 快速生成方法,用纠错功能 随机数 using System; using System.Collections. ...

  8. Java中如何实现类似C++结构体的二级排序

    1:实现Comparable接口 import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; ...

  9. hdu 4521 小明系列问题——小明序列 线段树+二分

    小明系列问题——小明序列 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Pro ...

  10. bugfree 数据库配置 显示No such file or directory

    把数据库服务器  localhost   改成127.0.0.1 sudo vi /etc/hosts 增加: 127.0.0.1   localhost 127.0.0.1   你的hostname ...