<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. 拼图游戏 v1.1

    我一直对拼图游戏比较有兴趣,市面上卖的所谓“1000块拼图”也玩过不少,不过玩那个太占地方,后来也不再买了,同时也就萌生了在电脑上玩拼图的想法. 现在虽然有很多拼图游戏,但能大多数只能支持几十或几百块 ...

  2. Windows Phone 7之XNA游戏：重力感应

    Windows Phone XNA游戏提供的重力传感器可以利用量测重力的原理判手机移动的方向,允许使用者利用摇动或甩动手机的方式控制游戏的执行,其原理和汽车的安全气囊相同,在侦测到汽车快速减速的时候立 ...

  3. [Cocos2d-x For WP8]Action 常用动作

    Action相当于是Cocos2d-x里面的动画操作,在Cocos2d-x里面的动画基类是CCAction类,从CCAction类派生出来的就有很多常用的动作的实现类,利用这些类就可以给我们游戏的精灵 ...

  4. 【NOI2015】品酒大会

    一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个奖项,吸引了众多品酒师参加. 在大会的晚餐上,调酒师 Rainbow 调制了 ...

  5. JQuery获取和设置Select选项常用方法总结 (转)

    1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&quo ...

  6. CKEDITOR使用与配置

    安装: 下载CKEDITOR的文件,解压后复制到工程的WEBROOT目录下就OK! 引用CKEDITOR的JS文件: 新建JSP页面,添加其JS文件<script type="text ...

  7. （译）V8引擎介绍

    V8是什么? V8是谷歌在德国研发中心开发的一个JavaScript引擎.开源并且用C++实现.可以用于运行于客户端和服务端的Javascript程序. V8设计的初衷是为了提高浏览器上JavaScr ...

  8. stringstream 使用方法

    C++中的stringstream是专门用来处理字符串流的,可以按顺序将string或int都拼接起来,而不用把int转换为string格式,使用方法如下: #include <string&g ...

  9. PHP对于Session漏洞的防范

    目前,基于PHP的网站开发已经成为目前网站开发的主流,本文笔者重点从PHP网站攻击与安全防范方面进行探究,旨在减少网站漏洞,希望对大家有所帮助! 一.常见PHP网站安全漏洞 对于PHP的漏洞,目前常见 ...

  10. 【转】Html页面结构范例

    原文地址:http://www.51testing.com/html/38/225738-220986.html · HTML · HEAD · LINK ... CSS files required ...