<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css变形功能</title>
<style>
body{
background-color: #b9eef0;
}
h3,p{
margin:100px 0px;
padding-bottom: 10px;
border-bottom:1px dotted rgb(74, 5, 91);
font:bold 20px "微软雅黑";
}
h3:first-child,p{
margin-top:20px;
}
h1{
font:bold 30px "微软雅黑";
margin-top:120px;
}
span{
font:bold 20px "微软雅黑";
}
div{
width: 200px;
height: 50px;
display: inline-block;
padding: 15px;
box-sizing: border-box;
background-color: rgba(113, 0, 208, 0.57);
text-align: center;
line-height: 50px;
font:500 14px "微软雅黑";
color: #fff;
}
.rotate{
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.scale{
-webkit-transform: scale(0.875,-3);
-moz-transform: scale(0.875,-3);
-ms-transform: scale(0.875,-3);
-o-transform: scale(0.875,-3);
transform: scale(0.875,-3);
/*transform: scaleX(0.63);*/
/*transform:scaleY(0.64);*/
/*可以這兩個這樣單獨的設置，就可以单独设置是x轴缩放还是y轴缩放了，或者设置两个值得时候，其中一个设为0也可以这种效果*/
}
.translate{
-webkit-transform: translate(30px,40px);
-moz-transform: translate(30px 40px);
-o-transform: translate(30px 40px);
-ms-transform: translate(30px 40px);
transform: translate(30px 40px);
}
.skew{
-webkit-transform: skew(-5deg,45deg);
-moz-transform: skew(-5deg,45deg);
-ms-transform: skew(-5deg,45deg);
-o-transform: skew(-5deg,45deg);
transform: skew(-5deg,45deg);
}
.jihe1{
-webkit-transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
-moz-transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
-ms-transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
-o-transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
}
.jihe2{
-webkit-transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
-moz-transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
-ms-transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
-o-transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
}
.jihe3{
-webkit-transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
-moz-transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
-ms-transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
-o-transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
}
.origin{
width:130px;
height:130px;
background: rgba(0, 65, 212, 0.57);
margin: 0px 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.origin1{}
.origin2{
-webkit-transform-origin:right bottom;
-moz-transform-origin:right bottom;
-ms-transform-origin:right bottom;
-o-transform-origin:right bottom;
transform-origin:right bottom;
margin-top:50px;
}
.hover{
width: 240px;
height: 250px;
display: inline-block;
padding: 15px;
cursor: pointer;
-webkit-transform-origin:right bottom;
-moz-transform-origin:right bottom;
-ms-transform-origin:right bottom;
-o-transform-origin:right bottom;
transform-origin:right bottom;
}
.hover:hover{
-webkit-transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
-moz-transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
-ms-transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
-o-transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
}
</style>
</head>
<body>
<h1 style="margin: 20px auto;">transform详解</h1>
<h3 style="margin: 20px auto;">1,旋转——rotate(读数deg)-正值为顺时针方向，负值的话会是逆时针方向</h3>
<br /><div>单个测试 原图</div>
<div class="rotate">单个测试 rotate</div>
<h3>2,缩放——scale(水平方向,垂直方向)可以是一个，表示整体；int整数值表示放大，float浮点值小数表示缩小倍率。负值的话会倒着翻过来.不用单位</h3>
<br /><div>单个测试 原图</div>
<div class="scale">单个测试 scale</div>
<li style="margin-top:50px">总结：scaleX();scaleY();可以這兩個這樣單獨的設置，就可以单独设置是x轴缩放还是y轴缩放了，或者设置两个值得时候，其中一个设为0也可以这种效果*/</li>
<h3>3,移动——translate(x方向px,y方向px)可以是一个，表示x方向</h3>
<br /><div>单个测试 原图</div>
<div class="translate">单个测试 translate</div>
<li style="margin-top:50px">总结：如果你全部写完了，但是效果还是出不来，发现代码也不报错，那请你检查一下translate属性的括号中是否有逗号，总是把这个逗号丢掉，没有逗号，不报错也不显示效果,这真可怕！！translate(Xpx,Ypx);</li>
<h3>4,倾斜——skew(水平方向deg，垂直方向deg)可以是一个，表示水平方向,可以为负值</h3>
<br /><div>单个测试 原图</div>
<div class="skew">单个测试 skew</div>
<li style="margin-top:100px">总结：skewX();skewY();可以這兩個這樣單獨的設置，就可以单独设置是x轴倾斜还是y轴倾斜了，或者设置两个值得时候，其中一个设为0也可以这种效果*/</li>
<h1>5.接下来对一个元素综合使用多个变形方法制作一个案例。</h1>
<p>注意：这几个变形使用的顺序不一样，效果也不一样.对比如下，很明显啊</p>
<div>综合使用效果 原图</div>
<div class="jihe1">综合使用效果-顺序1</div>
<div class="jihe2">综合使用效果-顺序2</div>
<div class="jihe3">综合使用效果-顺序3</div>
<div style="height:100px;color: #000;background-color: #6f40f7; color: #fff">总结：2和3的效果一样，看来，只要平移和旋转的前后顺序有调整就会有变化，不关缩放的事情</div>
<p style="margin-top:170px;margin-bottom:20px;">这是因为</p>
<p style="margin-bottom:20px;">1.元素的中心点总是在最中间的，而水平平移的方向也是左右，垂直平移的方向是上下。如果先平移，元素的水平和垂直的准线还是和二维坐标的xy轴平行的。自然最后旋转是从中心点旋转不会有影响。<br/>2.但是若先旋转，那么元素的水平线和垂直线都发生了转动，再进行平移的话，就是在旋转后的方向基础上向前移动。具体见下图</p>
<img src="data:images/transform1.jpg"/>
<span>先平移后旋转</span>
<img src="data:images/transform.jpg"/>
<span>先旋转后平移</span>
<p></p>
<h1 style="margin-top: 10px;">6.transform-origin改变动画变形的基准点</h1>
<div class="origin origin1 style="margin-top: 10px;">
我是没有设置origin的
</div>
<div class="origin origin2">
我是设置了origin的
</div>
<p>總結：共有兩個屬性需要填寫《水平，垂直》：水平有三個點：left，center，right；垂直的有三個點：top，center，bottom</p>
<h1>7.最后综合，来个鼠标移动上去变换效果</h1>
<div class="hover">最后综合，来个鼠标移动上去变换效果</div>
<p><a style="display: block; text-align: center;color: #06304d;font-weight: 100">2016.08.10 00:06;by xing.orgl^</a></p>
</body>
</html>

CSS3-transform变形功能的更多相关文章

  1. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  2. CSS3 transform变形（3D转换）

    一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...

  3. css3 transform(变形)笔记

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...

  4. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

  5. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  6. css3 transform 变形

    在css3中,用transform可以实现文字或图像的旋转.缩放.倾斜和移动,并且该元素下的所有子元素,随着父元素一样转.缩放.倾斜和移动. transform属性 transform的属性包括:ro ...

  7. CSS3 transform变形（2D转换）

    transform 属性应用于2D 或 3D 转换.该属性允许我们对元素进行平移.旋转.缩放或倾斜. 一.translate(x,y).translateX(n).translateY(n)定义2D平 ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. CSS3 Transform——transform-origin

    2012年9月,W3C组织发布了CSS3变形工作草案.CSS3变形允许CSS把元素转变为2D 或3D空间,这个草案包括了CSS3 2D变形和CSS3 3D变形. CSS3变形是一些效果的集合,比如平移 ...

  10. css3中变形处理

    transfrom功能 在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...

随机推荐

  1. Linux下网络流量实时监控工具

    Linux下网络流量实时监控工具大全 在工作中发现,经常因为业务的原因,需要即时了解某台服务器网卡的流量,虽然公司也部署了cacti软件,但cacti是五分钟统计的,没有即时性,并且有时候打开监控页面 ...

  2. linux开机自动启动

    1 .vi /etc/rc.local 2.编写开机后运行的命令 如:service httpd start

  3. Linux中sudo配置

    Linux下的sudo及其配置文件/etc/sudoers的详细配置. 1.sudo介绍 sudo是linux下常用的允许普通用户使用超级用户权限的工具,允许系统管理员让普通用户执行一些或者全部的ro ...

  4. grub.conf文件参数详解

    Grub是Linux的下系统启动器之一(另一个名为Lilo),grub.conf相当于 windows下的boot.ini,都是存放启动项设置和信息的,如果你熟悉boot.ini的设置的话相信也可以很 ...

  5. 数据库高可用架构(MySQL、Oracle、MongoDB、Redis)

    一.MySQL MySQL小型高可用架构 方案:MySQL双主.主从 + Keepalived主从自动切换   服务器资源:两台PC Server 优点:架构简单,节省资源 缺点:无法线性扩展,主从失 ...

  6. 基于tiny4412原生uboot修改制作SD启动并烧写到emmc

    最近入手tiny4412的标准板,底板SDK型号为1506.但是因为友善之臂提供的superboot不能进入boot菜单,此时我就不能通过tftp下载内核和通过nfs挂载根文件系统,于是想自己做个ub ...

  7. 转 ext文件系统及块组

    一.文件系统概述 1. 引导块 前文中介绍过磁盘需要进行分区和格式化,才能创建文件系统并使用,那么一块已经被各式化了分区其结构是什么样的呢?分区是按照柱面来划分的,而柱面包含的是磁道,磁道上包含的是扇 ...

  8. [转]理解JavaScript中的事件处理

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  9. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  10. gbdt推导和代码

    GBDT算法推导过程 m次迭代,n个类别,那么就意味着学习了m*n棵回归树 train过程:假设有8个训练样本,3个类别 步骤一.假设所有样本的F矩阵,F矩阵是8*3的,F矩阵刚开始全为0,而实际每个 ...