<html

<head>

    <title></title>

    <style>

    .test

    {

    	margin-left:300px;

    	margin-top:200px;

    	width:300px;

    	height:300px;

    	border: dashed 2px red;

    	-ms-transform:rotate(30deg);/*旋转角度单位为deg*/

    	-ms-transform:translate(10px,20px);/*如果设置margin-left或者margin-top则translate在这基础上添加的位移*/

    	-ms-transform:skew(1deg,30deg);/*沿 X 和 Y 轴的倾斜后转换*/

    	}

    </style>

</head>

<body>

<div class="test">

</div>

</body>

</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. 递推DP URAL 1119 Metro

    题目传送门 /* 题意:已知起点(1,1),终点(n,m):从一个点水平或垂直走到相邻的点距离+1,还有k个抄近道的对角线+sqrt (2.0): 递推DP:仿照JayYe,处理的很巧妙,学习:) 好 ...

  2. Vijos 1100 (区间DP)

    题目链接: https://vijos.org/p/1100 题目大意:NOIP著名的加分二叉树.给出一棵树的中序遍历,加分规则左子树*右子树+根.空子树分数为1.问最大加分的树结构,输出树结构的先序 ...

  3. Codeforces Round #192 (Div. 2) A. Cakeminator

    #include <iostream> #include <vector> using namespace std; int main(){ int r,c; cin > ...

  4. 【BZOJ】1059: [ZJOI2007]矩阵游戏（二分图匹配）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1059 本题可以看出,无论怎样变化,在同一行和同一列的数永远都不会分手---还是吐槽,,我第一眼yy了 ...

  5. HDU 4666 Hyperspace(曼哈顿距离)

    题目链接 这是HDU第400个题. #include <cstdio> #include <cstring> #include <set> #include < ...

  6. hiho#1033 : 交错和

    描述 给定一个数 x,设它十进制展从高位到低位上的数位依次是 a0, a1, ..., an - 1,定义交错和函数: f(x) = a0 - a1 + a2 - ... + ( - 1)n - 1a ...

  7. java 实现数据结构之队列

    队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,只允许在表的后端(rear)进行插入操作. 1.队列的顺序存储结构及实现 public class SequenceQueue&l ...

  8. eWebeditor编辑器上传图片的设置程序

    protected void Button1_Click(object sender, EventArgs e) { if (this.uploadfile.PostedFile.FileName.E ...

  9. GC-垃圾回收

    代:0代,1代,2代: 所谓第几代,指经历过GC回收的次数. 回收算法: 1.确认需要检查的代. 在分配新对象时, 如果第0代已满,则进行检查:如果第1代已满,则进行检查:第2代同理: 如第0代没有足 ...

  10. svchost.exe是什么？为什么一直在运行

    原文:http://www.howtogeek.com/howto/windows-vista/what-is-svchostexe-and-why-is-it-running/ 自己简单翻译了下,图 ...