形变

2D形变

matrix()：

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate()：

指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translatex()：

指定对象X轴（水平方向）的平移

translatey()：

指定对象Y轴（垂直方向）的平移

rotate()：

指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义

scale()：

指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scalex()：

指定对象X轴的（水平方向）缩放

scaley()：

指定对象Y轴的（垂直方向）缩放

skew()：

指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewx()：

指定对象X轴的（水平方向）扭曲

skewy()：

指定对象Y轴的（垂直方向）扭曲　

运用实例

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>2d形变</title>

	<style type="text/css">

		div {

			width: 50px;

			height: 50px;

			background-color: red;

			margin: 30px auto 0;

			text-align: center;

			line-height: 50px;

			transition: 3s;

			/*形变参考点: 三轴交界点*/

			/*transform-origin: 0 0;*/

		}

		.d1 {

			/*形变: 只操作自身显示图层(让图层发生变化), 不影响盒子布局*/

			/*注: 不拿形变来布局, 只能形变来完成动画*/

			/*transform: rotate(45deg);*/

			/*transform: scale(3);*/

			/*transform: translateY(100px);*/

			/*margin-top: 50px;*/

		}

		.d2:hover {

			/*旋转: 旋转的是角度 deg*/

			/*transform: rotate(720deg);*/

			transform: rotateZ(7200deg);

		}

		.d3:hover {

			transform: rotateY(7200deg);

		}

		.d4:hover {

			/*偏移: 偏移的是距离 px*/

			/*如果需要发送多状态形变,需要分别写在一条transform属性设置中*/

			/*各个形变之间用空格隔开*/

			/*顺序一般会影响结果*/

			/*transform: translateY(100px) translateX(100px);*/

			/*不能这么书写: 所有形变效果的实现都是对transform一个属性进行设置*/

			/*下方这么设置,第二次赋值会覆盖第一次赋值(只能保留最后一次赋值)*/

			transform: translateX(100px);

			transform: translateY(100px);

		}

		.d5:hover {

			transform: translateX(100px) rotate(7200deg);

			/*transform: rotate(7200deg) translateX(100px);*/

		}

		.d6:hover {

			/*缩放: 缩放的是比例 无单位*/

			transform: scale(3, 0.5);

			/*transform: scaleX(3) scaleY(0.5);*/

		}

		.d7:hover {

			transform: translateX(100px) rotate(720deg) scale(2);

		}

		.d8:hover {

			margin-left: 1200px;

		}

	</style>

</head>

<body>

	<div class="d1">1</div>

	<div class="d2">2</div>

	<div class="d3">3</div>

	<div class="d4">4</div>

	<div class="d5">5</div>

	<div class="d6">6</div>

	<div class="d7">7</div>

	<div class="d8"></div>

</body>

</html>

小米形变案例

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>小米形变案例</title>

	<style type="text/css">

		.wrapper {

			width: 230px;

			height: 300px;

			background-color: #ddd;

			margin: 50px auto;

		}

		.box {

			width: 230px;

			height: 300px;

			background-color: yellow;

			transition: .3s;

			position: relative;

		}

		.footer {

			width: 230px;

			height: 0;

			overflow: hidden;

			background-color: red;

			transition: .3s;

			position: absolute;

			bottom: 0;

		}

		.wrapper:hover .box {

			transform: translateY(-5px);

			box-shadow: 0 5px 10px 2px #ddd;

		}

		.wrapper:hover .footer {

			height: 80px;

		}

	</style>

</head>

<body>

	<div class="wrapper">

		<div class="box">

			<div class="footer">12345</div>

		</div>

	</div>

</body>

</html>

3d形变

matrix3d()：

以一个4x4矩阵的形式指定一个3D变换

translate3d()：

指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

translatez()：

指定对象Z轴的平移

rotate3d()：

指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略

rotatex()：

指定对象在x轴上的旋转角度

rotatey()：

指定对象在y轴上的旋转角度

rotatez()：

指定对象在z轴上的旋转角度

scale3d()：

指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

scalez()：

指定对象的z轴缩放

perspective()：

指定透视距离

动画

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>动画</title>

	<style type="text/css">

		.box {

			width: 100px;

			height: 100px;

			background-color: red;

			margin-left: 200px;

			margin-top: 50px;

		}

		/*实现动画*/

		/*1.设置动画体*/

		/*2.设置动画属性*/

		/*1.设置动画体

		@keyframes 动画名 {

			多种状态的动画体

		}

		*/

		/*2.设置动画属性

		.box {

			animation: 动画相关属性;

		}

		*/

		@keyframes hehe {

			/*起点省略采用的就是初始状态*/

			0% {}

			33.3% {

				margin-left: 800px;

				margin-top: 50px;

			}

			66.6% {

				margin-left: 500px;

				margin-top: 300px;

			}

			/*终点需要设置*/

			100% {

				margin-left: 200px;

				margin-top: 50px;

			}

		}

		.box {

			/*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/

			animation: hehe 2s 1 linear;

		}

	</style>

</head>

<body>

	<div class="box"></div>

</body>

</html>

更及详细的请参考CSS参考手册 http://css.doyoe.com/

CSS形变与动画的更多相关文章

  1. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  2. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  3. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  4. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  5. 简单的CSS圆形缩放动画

    简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...

  6. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  7. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  8. How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

    个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...

  9. 简单CSS实现闪烁动画（+1白话讲解）

    原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...

随机推荐

  1. version `GLIBC_2.14' not found问题

    先对比下源码编译.RPM 包和 YUM 三种安装方法的优劣: 源码编译:可以自行指定编译参数,自由度高,略显麻烦.但是如果不安装最新版本,BUGs 和 CVEs 是不会被修复的,和咸鱼没什么差别: R ...

  2. Linux 下用 crontab 设置定时执行python 程序

    Linux 下用 crontab 设置定时执行python 程序 方法/步骤   1,先大概了解crontab,/etc/crontab 就是crontab 的配置文件. crontab命令详解可以查 ...

  3. Ancient Go---hdu5546（dfs爆搜CCPC题目）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5546 题意就是两个人下围棋,问在下一颗x是否能杀死o,'.'是空位子: 枚举所有的点,判断是否合法即可 ...

  4. 优云亮相GOPS2017全球运维大会 “黑科技”获全场最高关注

    2017年4月21日,GOPS――2017全球运维大会于深圳・圣淘沙酒店拉开帷幕.GOPS全球运维大会由高效运维社区(GreatOPS)和开放运维联盟(OOPSA)联合主办,由工信部信通院数据中心联盟 ...

  5. [python-opencv] 模糊操作

    @不要在奋斗的年纪 选择安逸 均值模糊 中值模糊 自定义模糊 意义与应用场景 模糊的基本原理: 1.基于离散卷积 2.定义好每个卷积核 3.不同卷积核得到不同的卷积效果 4.模糊是卷积的一种表象 #均 ...

  6. 修改dedecms面包屑导航的首页链接关键字

    dedecms面包屑导航默认是"主页>分类>二级分类>",我们知道链接的锚文字对排名有一定影响,这时可以考虑将“主页”改成具体的关键字,那么如何修改dedecms ...

  7. UVA 11136 Hoax or what (multiset)

    题目大意: 超时进行促销.把账单放入一个箱子里 每次拿取数额最大的和最小的,给出 最大-最小  的钱. 问n天总共要给出多少钱. 思路分析: multiset 上直接进行模拟 注意要使用long lo ...

  8. 系列解读Dropout

    本文主要介绍Dropout及延伸下来的一些方法,以便更深入的理解. 想要提高CNN的表达或分类能力,最直接的方法就是采用更深的网络和更多的神经元,即deeper and wider.但是,复杂的网络也 ...

  9. spring boot 中用@value给static变量赋值

    需求:改写一个JedisUtils,工具类,所以最好用静态方法和变量. @value("${redis.host}") private static String redisHos ...

  10. redis 在windows 上面的安装和使用，集群搭建

    redis作为nosql数据库,将数据存储到内存中(缓存),具有非常高的性能.下面讲解一下redis的安装及java api的使用. 1:redis 安装 windows 上面直接下载msi文件,安装 ...