CSS3 Transform实例
移动translate <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background:rosybrown;
color:blueviolet;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}
</style>
</head> <body>
<div class="wrapper">
<div>我向右向下移动</div>
</div>
</body>
</html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background:rosybrown;
color:blueviolet;
-webkit-transform: translate(-50px);
-moz-transform:translate(-50px);
transform: translate(-50px);
}
</style>
</head> <body>
<div class="wrapper">
<div>我向左移动</div>
</div>
</body>
</html>
效果：
CSS3变形--旋转 rotate()
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: blueviolet;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head> <body>
<div class="wrapper">
<div></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg); }
</style>
</head> <body>
<div class="wrapper">
<div></div>
</div>
</body>
</html>
演示结果 
CSS3中的变形--缩放 scale()
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style> .wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5);
}
</style>
</head> <body>
<div class="wrapper">
<div>我将放大1.5倍</div>
</div>
</body>
</html>
演示结果
CSS3中的变形--矩阵 matrix()
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style> .wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:200px;
height: 200px;
background: blueviolet;
-webkit-transform: matrix(,,,,,);
-moz-transform:matrix(,,,,,);
transform: matrix(,,,,,);
}
</style>
</head> <body>
<div class="wrapper">
<div></div>
</div>
</body>
</html>
演示结果：
matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()); 扭曲缩放加位移
X轴缩放，X轴扭曲，Y轴扭曲，Y轴缩放，X轴位移，Y轴位移
a为元素的水平伸缩量，1为原始大小；
b为纵向扭曲，0为不变；
c为横向扭曲，0不变；
d为垂直伸缩量，1为原始大小；
e为水平偏移量，0是初始位置；
f为垂直偏移量，0是初始位置
CSS3中的变形--原点 transform-origin
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}
</style>
</head> <body>
<div class="wrapper">
<div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
<div>原点重置到左上角</div>
</div>
</body>
</html>
演示结果：
CSS3中的变形--扭曲 skew()
HTML代码：
<div class="wrapper">
<div>我变成平形四边形</div>
</div>
CSS代码：
.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}
演示结果
CSS3 Transform实例的更多相关文章
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- css3 transform中的matrix矩阵
CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...
- 小心 CSS3 Transform 引起的 z-index "失效"
https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...
- CSS3 transform rotate（旋转）锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
- CSS3 transform对普通元素的N多渲染影响
一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...
- CSS3 transform 属性
CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...
随机推荐
- org.xml.sax.SAXParseException: 元素类型 "input" 必须由匹配的结束标记 "</input>" 终止。
错误记录 Spring Boot推荐使用thymeleaf作为视图,按照SpringBoot实战一书的案例写Demo. 发生错误: org.xml.sax.SAXParseException: 元素类 ...
- wap开发tips
1.overflow-x 这真的是一个大坑,一旦你在body或者html上用了这个属性,对不起,如果你的页面出现滚动条的话,那就会出现莫名其妙的bug,滑动页面的时候fix在顶部或者底部的会挡住. 解 ...
- centos 6.8 安装 WebVirtMgr
1.kvm虚拟机已经用 virsh命令装好了 2. WebVirtMgr的安装步骤完全参照此处: https://github.com/retspen/webvirtmgr/wiki/Install- ...
- vue2.0 之 douban （四）创建Swipe图片轮播组件
swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下, ...
- mysql的my.cnf参数详解
转载[Mysql] MySQL配置文件my.cnf的理解 一.缘由 最近要接手数据库的维护工作,公司首选MySQL.对于MySQL的理解,我认为很多性能优化工作.主从主主复制都是在调整参数,来适应不同 ...
- 在vue中如何引jquer
最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...
- 一个DRF框架的小案例
第一步:安装DRF DRF需要以下依赖: Python (2.7, 3.2, 3.3, 3.4, 3.5, 3.6) Django (1.10, 1.11, 2.0) DRF是以Django扩展应用的 ...
- Vue知识整理5：v-bind绑定属性（Class 与 Style 绑定）
通过v-bind实现Class 与 Style 绑定,方便调整属性的值
- 神器 工具 推荐 SRDebugger
unity asset store 关联下载 ,添加这个书签 javascript:var url = window.location.href;var id = url.substr(url.la ...
- 怎么用 pytorch 查看 GPU 信息
如果你用的 Keras 或者 TensorFlow, 请移步 怎么查看keras 或者 tensorflow 正在使用的GPU In [1]: import torch In [2]: torch.c ...