1. <html
  2. <head>
  3.     <title></title>
  4.     <style>
  5.     .test
  6.     {
  7.     	margin-left:300px;
  8.     	margin-top:200px;
  9.     	width:300px;
  10.     	height:300px;
  11.     	border: dashed 2px red;
  12.     	-ms-transform:rotate(30deg);/*旋转角度单位为deg*/
  13.     	-ms-transform:translate(10px,20px);/*如果设置margin-left或者margin-top则translate在这基础上添加的位移*/
  14.     	-ms-transform:skew(1deg,30deg);/*沿 X 和 Y 轴的倾斜后转换*/
  15.     	}
  16.     </style>
  17. </head>
  18. <body>
  19. <div class="test">
  20. </div>
  21. </body>
  22. </html>

css“变形”效果的更多相关文章

  1. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  2. 用CSS变形创建圆形导航

    http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...

  3. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...

  4. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  5. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  6. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  7. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  8. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  9. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

随机推荐

  1. 关于用了SSH连接之后，但是Chrome中访问stackoverflow超慢的原因

    FQ条件如下: SSH + Chrome + ProxySwitchySharp 其中ProxySwitchySharp已经设置了通配符: 但是打开 www.stackoverflow.com还是奇慢 ...

  2. BZOJ2102 : [Usaco2010 Dec]The Trough Game

    暴力枚举答案然后检验. #include<cstdio> int n,m,i,j,k,a[100],b[100],cnt,ans;char s[20]; int main(){ for(s ...

  3. GSS系列（1）——GSS1&&GSS3

    题意:询问一个区间内的最大连续子段和(GSS1),并且有单点修改的操作(GSS2). 思路:这个题目在老人家的大白鼠里出现过,不过那个是求两个下标,并且相同取更小值.——传的东西更多,判断也稍微繁琐一 ...

  4. POJ 1523 (割点+连通分量)

    题目链接:http://poj.org/problem?id=1523 题目大意:连通图,找图中割点,并计算切除该割点后,图中的连通分量个数. 解题思路: POJ的数据很弱. Tarjan法求割点. ...

  5. CC150 - 11.6

    Question: Given an M x N matrix in which each row and each column is sorted in ascending order, writ ...

  6. ubuntu14.04美化

    首先我美化grub启动菜单背景和开关机背景,还有自动换壁纸.其它的美化日后再写博文. Grub启动菜单背景更换: 这个很简单,比以前的ubuntu和grub版本简单多了,直接将图片文件放到/boot/ ...

  7. java不用jni，也可以获得当前系统性能信息

    最近做个项目,就是要取得cpu占有率等等的系统信息,一开始以为要用动态链接库了,但后来发现可以像下面这样做,不去调用jni,这样省去了很多看新技术的时间o(∩_∩)o... 在Java中,可以获得总的 ...

  8. PCL 1.6.0 VS2010 Configuration

    Open VS2010, create a new project, then open Property Manager, double-click Microsoft.Cpp.win32.user ...

  9. uc_key getshell

    <?php $key = 'cebbvi5s15BSiMXteaP9TNCIz5K5jAVekw7tcV9TqmYCNT5VOJdu7toOxipTX';#uc_key 写在这里 $url = ...

  10. 词频统计（WEB版）

    通过点击浏览按钮输入文件: 点击查询按钮后返回结果: 前台代码: <%@ Page Language="C#" AutoEventWireup="true" ...