css3的2D转换
CSS3的2D转换用transform来实现
1.rotate() /*通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。*/
2.scal() /*通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数*/
3.skew() /*通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数*/
4.tanaslate() /*通过 translate() 方法， 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数*/ 相当于relative定位
<style>
#kuang{
height:50px;
width:100px;
border:1px solid red;
background-color:#C3F;
}
#kuang11{
height:50px;
width:100px;
border:1px solid red;
background-color:#6F0;
margin-top:50px;
transform:rotate(30deg)
}
#kuang12{
height:50px;
width:100px;
border:1px solid red;
background-color:#C00;
margin-left:150px;
transform:skew(20deg,40deg)/*表示围绕x轴旋转20度，围绕y轴旋转40度*/
}
#kuang13 {
height:50px;
position:relative;
width:100px;
border:1px solid red;
position:relative;
background-color:#60C;
margin-top:100px;
margin-left:100px;
transform:scale(2,3)}/*表示宽度是之前的2倍，高度是之前的3倍*/
#kuang14{
height:50px;
width:100px;
position:relative;
border:1px solid red;
background-color:#60F;
transform:translate(50px,100px)}
</style>
<body>
<div id="kuang"></div>
<div id="kuang11"></div>
<div id="kuang12"></div>
<div id="kuang13"></div>
<div id="kuang14"></div>
</body>
效果如图所示：
css3的2D转换的更多相关文章
- css3之2D转换
css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...
- 我最喜欢用的css3之2D转换之translate用法
CSS3 2D 转换 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transfor ...
- HTML CSS3中2D转换、3D转换、过渡效果总结
一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...
- CSS3的2D 转换——旋转，缩放，translate()，skew()，matrix()
2D转换方法:在平面对元素进行旋转,缩放,移动,拉伸. ㈠浏览器支持 ⑴2D转换效果有以下的浏览器支持: ⑵在编辑代码的时候要注明用哪种浏览器打开,在前面加上前缀,下面是编辑器的简写形式,以及前缀 ...
- css3之2D 转换
浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Chrome 和 Safari 要求 ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- css3学习总结7--CSS3 2D转换
CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D 转换 在本次,您将学到如下 2D 转换方法: 1. translate() 2. rotate() 3. ...
- CSS笔记（十二）CSS3之2D和3D转换
参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...
- CSS3 2D转换
CSS3 转换 通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 它如何工作? 转换是是元素改变形状.尺寸和位置的一种效果. 你可以使用2D或3D转换你的元素. 浏览器支持 属性 浏 ...
随机推荐
- *** glibc detected *** malloc(): memory corruption 分类： C/C++ Linux 2015-05-14 09:22 37人阅读 评论(0) 收藏
*** glibc detected *** malloc(): memory corruption: 0x09eab988 *** 发现是由于memset越界写引起的. 在Linux Server上 ...
- CommandExtra.lua --游戏命令扩展
--[[作者信息: Command Extra (游戏命令扩展) 作者QQ:247321453 作者Email:247321453@qq.com 修改日期:2014-3-12 功能:添加额外的命令.G ...
- 《统计推断（Statistical Inference）》读书笔记——第3章 统计分布族
在科学研究中最重要的两种思维范式是“简化”和“还原”,所谓“简化”是指人依据不太复杂的,可理解的规律认识世界:所谓“还原”是指任何复杂的现象归根结底可以由若干简单的机制解释.各种统计分布族就是统计学中 ...
- Sublog: 支持Markdown和语法高亮的跨平台博客客户端
灵感来自米米饭 功能一览 为什么你应该试试用Sublog写博客 项目主页: sublog 使用方法: 本项目是一个插件,首先要安装Sublime Text 2 重命名sublog.sublime-se ...
- OpenGL矩阵类(C++)
概述 创建&初始化 存取器 矩阵运算 变换函数 实例:模型视图矩阵 实例:投影矩阵 概述 OpenGL固定功能管线提供4个不同类型的矩阵(GL_MODELVIEW.GL_PROJECTION. ...
- Android学习七：new Date使用
1.例子 学习时间函数,并实现了简单的多个按钮监听同一个事件的方法 2.代码 代码很简单,也很清晰 package com.example.datetime; import java.text.Sim ...
- IOS开发-CAlayer-锚点小结
CAlayer层的属性:anchorPoint(锚点) CAlayer *view; 1.决定着CALayer上的哪个点会在position属性所指的位置(设置以后旋转动画,就是以锚点为中心旋转) ...
- 【巩固】JS获取时间的一些基础知识
就是一个new Date()对象,要注意的有以下几点; 直接给oDate对象设置年月日时分秒的时候要分成两步,oDate.setFullYear()接受三个参数分别是年月日,注意月份是从0开始计一月的 ...
- silverlight简单数据绑定3
3种数据绑定模式 OneTime(一次绑定) OneWay(单项绑定) TwoWay(双向绑定) OneTime:仅在数据绑定创建时使用数据源更新目标. 列子: 第一步,创建数据源对象让Person ...
- X-Cart 学习笔记（四）常见操作
目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 五.常见 ...