应用多种变形CSS3
<!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 {
position:absolute;
width:140px;
height:140px;
background-color:#e4105e;
border:2px solid #000000;
margin:30px;
}
/*.box {
-moz-transform:rotate(30deg) translate(260px,60px) scale(2.4,0.4);
-webkit-transform:rotate(30deg) translate(260px,60px) scale(2.4,0.4);
-o-transform:rotate(30deg) translate(260px,60px) scale(2.4,0.4);
}*/ /* 该盒子旋转45度;位移100px,30px;缩放2.3,0.3*/
.box {
-moz-transform:translate(260px,60px) rotate(30deg) scale(2.4,0.4);
-webkit-transform:translate(260px,60px) rotate(30deg) scale(2.4,0.4);
-o-transform:translate(260px,60px) rotate(30deg) scale(2.4,0.4);
}
/*如果变换的顺序不同,得到的效果也不同*/
</style>
</head>
<body>
<div>文字</div>
<div class="box">文字</div><br />
</body>
</html>
应用多种变形CSS3的更多相关文章
- 变形CSS3
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- CSS3中的变形处理
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...
- CSS3中的transform变形
在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...
- 从零开始学习前端开发 — 14、CSS3变形基础
一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...
- 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- CSS3 动画基础
该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术 原文:Wha ...
- css3的动画
一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...
随机推荐
- bzoj 3505 数三角形 - 组合数学
给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. Input 输入一行,包含两个空格分隔的正整数m和n. Output 输出 ...
- 函数引用参数加const
Fun(const Type& type); 在引用传递的时候,在函数内部改变参数,会改变参数实际值. 加上了const就不能被修改.
- C# 获取枚举的描述属性
在使用枚举类型时,我们需要取名称和值,甚至有时候还需要取枚举类型的描述.通过反射,我们能获取到枚举类型的描述属性. 首先我们需要给枚举类型添加描述属性(属性都没有是不可能取到的),[Descripti ...
- linux磁盘分区详解【转】
本文装载自:http://blog.csdn.net/aaronychen/article/details/2270048#comments 在学习 Linux 的过程中,安装 Linux 是每一个初 ...
- swift设计模式学习 - 原型模式
移动端访问不佳,请访问我的个人博客 设计模式学习的demo地址,欢迎大家学习交流 原型模式 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 定义 用原型实例指定创建对象的种类,并且通 ...
- Excel编程的基本概念
http://wenku.baidu.com/link?url=b3RZzH4KILFWbysnenCvXwiFFkyZqkxk8bvOMy1T7xW54MeGL1WHivGvyqxgI3yFXvY6 ...
- 【修改编码】修改tomcat默认的编码方式
默认情况下,tomcat使用的的编码方式:iso8859-1 修改tomcat下的conf/server.xml文件 找到如下代码: <Connector port="8080& ...
- perl入门知识(3)
引用 在很多场合下使用引用传值,能在很大程度上提高代码的运行效率. 定义一个引用在变量名前加”\”就可以了,如: $ra=\$a; $rb=\@b; ...
- BZOJ 1006: [HNOI2008]神奇的国度(弦图染色)
http://www.lydsy.com/JudgeOnline/problem.php?id=1006 题意: 思路: 这个就是弦图染色问题,弦图啥的反正我也不懂,具体看论文https://wenk ...
- MongoDB(课时28 group操作)
3.7.3 group操作 使用“group”操作可以实现数据的分组操作,MongoDB里将集合依据不同的的key进行分组操作,并且每个组产生一个处理文档. 范例:查询年龄大于等于19岁的学生信息,并 ...