<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. 【python游戏编程之旅】第二篇--pygame中的IO、数据

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 在上一篇中,我们介绍了pygame的入门操作http://www.cnblogs.com/msxh/p/49 ...

  2. BZOJ3024 : [Balkan2012]balls

    问题1: ans=max(sum[n]-(sum[i]-sum[j-1])+a[i]*(i-j+1)) =max(sum[n]-sum[i]+sum[j-1]+a[i]*(i+1)-a[i]*j) = ...

  3. MONO 使用重要提示

    重要提示:如果要使用mvc这样的框架(网址没有扩展名或扩展名没有正常规律),请一定用Jexus,而不要用apache/nginx等. ASP.NET跨平台初学者要注意: 1.不要开始就用freeBSD ...

  4. js-sdk探索之微信网页分享

    微信是一个很不错的传播平台,最近公司需要做一个新年贺卡,使用html5制作一个很小的动画,然后发送给客户,不需要和后台有任何的联系,一个很简单的功能,需要利用微信的分享功能,毕竟微信分享的带小图片.简 ...

  5. 【BZOJ】1602: [Usaco2008 Oct]牧场行走（lca）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1602 一开始以为直接暴力最短路,但是n<=1000, q<=1000可能会tle. 显然 ...

  6. 【POJ】1062 昂贵的聘礼（spfa）

    http://poj.org/problem?id=1062 此题一开始果断想到暴力.. 但是n<=100果断不行. 一看题解,噗!最短路... 构图很巧妙. 每一个物品对应的所需物品相当于一个 ...

  7. COJ262 HDNOIP201206施工方案

    HDNOIP201206施工方案 难度级别:A: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 c国边防军在边境某处的阵地是由n个地堡组成的. ...

  8. python3环境搭建（CentOS7.2）

    安装python3(自动安装pip3):yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqli ...

  9. ArcEngine开发：IElement.Geometry 值不在预期范围内 + 元素绘制代码

    IElement pEle = pLineEle as IElement; pEle.Geometry = pLn; pLn为一个ILine对象,想当然的以为它是IGeometry对象,可以赋值,结果 ...

  10. WBS练习

    我们把这次团队程序设计分成了6个模块,让每一个同学都能参与其中,然后让每一个人选一个自己喜欢的模块,最后数据库设计这个部分就大家一起来做. Everybody's task allocation is ...