应用多种变形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 ...
随机推荐
- MySQL中的基本SQL语句
标准SQL包含了4种基本的语句类别: DDL语句,数据定义语句,主要用来定义数据库,表名,字段,例如create,drop,alter. DML语句,数据操作语句,用来对数据记录的增删改查,还用来保证 ...
- P3627 [APIO2009]抢掠计划
P3627 [APIO2009]抢掠计划 Tarjan缩点+最短(最长)路 显然的缩点...... 在缩点时,顺便维护每个强连通分量的总权值 缩完点按照惯例建个新图 然后跑一遍spfa最长路,枚举每个 ...
- NFS Iptables放行服务端口
启动NFS会开启如下端口:1)portmapper 端口:111 udp/tcp:2)nfs/nfs_acl 端口:2049 udp/tcp:3)mountd 端口:"32768--6553 ...
- 20145122《Java程序设计》第九周学习总结
教材学习内容总结 1.JDBC代表Java数据库连接,这是一个标准的Java API与数据库无关的与Java编程语言之间的和大多数数据库连接.JDBC API支持两层和三层的处理模式对数据库的访问,但 ...
- EditText输入属性
1. android:inputType="none" android:inputType="text" android:inputType="tex ...
- 【angular2+typeScript+ng-zorro】Carousel 走马灯的左右方向控件实现
ng-zorro Carousel 走马灯的左右方向控件实现 ng-zorro框架的走马灯本身还没有左右方向控件的实现,作者只是在文档中(0.6x)中曝出几个方法接口,如图: 实现: 在根compon ...
- Python3基础 file with 配合文件操作
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- windows10下cygwin安装神器apt-cyg
一.背景 需要在cygwin下安装一些库 二.安装 2.1获取apt-cyg源码 git clone https://github.com/transcode-open/apt-cyg.git 2.2 ...
- luogu P2114 [NOI2014]起床困难综合症 位运算 二进制
建议去uoj那里去测,数据比较强 位运算的题目,就得一位一位的分开考虑 然后枚举初始值的最高位是0 是1 的最终攻击 (二进制内)最高位是1肯定比次位是1次次位是1次次次位是1···的大吧,显然 然后 ...
- HDU 6060 RXD and dividing(思维+计算贡献值)
http://acm.hdu.edu.cn/showproblem.php?pid=6060 题意: 给定一棵 n 个节点的树,1 为根.现要将节点 2 ~ n 划分为 k 块,使得每一块与根节点形成 ...