形变

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. redux+react-redux+示例的快速上手体验

    刚学习redux的同学提供一些可供参考的例子. 之前用vue用了很久 vue的语法糖用起来是真的舒服  react 其实毕竟他们都是类似的框架, 虽然语法大不同, 但是有些地方的思想还是很像的, 废话 ...

  2. python 基础 集合

    集合 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 交集 并集 差集 子集  对称差集 list ...

  3. lua的文件管理

    lua没有自己的文件管理 只有读取和写入文件,但是可以通过调用lfs(LuaFileSystem),lfs是一个 用于lua进行文件访问的库,支持lua5.1和lua5.2,并且跨平台 lfs的使用: ...

  4. PAT 1026 Table Tennis[比较难]

    1026 Table Tennis (30)(30 分) A table tennis club has N tables available to the public. The tables ar ...

  5. Jquery each&forEach

    jQuery方法 语法 .each() 作用 用来遍历dom 用法 $(dom).each( function(index, Element) ) { do Something... } 参数 第一个 ...

  6. CSS :hover 选择器

    定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素. 提示::hover 选择器可用于所有元素,不只是链接. 提示::link 选择器设置指向未被访问页面的链接的样式,:visited ...

  7. CloudFlare防护下的破绽：寻找真实IP的几条途径

    本文仅代表作者独立观点,本文提及的技术仅供安全研究和渗透测试用途 看Twitter发现CloudFlare总裁什么的最近很高调,北京.香港的跑着参加会议.发表演说什么的,CloudFlare似乎也没那 ...

  8. 机器学习理论基础学习10--- 高斯混合模型GMM

    一.什么是高斯混合模型? 高斯混合模型(Gaussian Mixed Model)指的是多个高斯分布函数的线性组合,理论上GMM可以拟合出任意类型的分布,通常用于解决同一集合下的数据包含多个不同的分布 ...

  9. NLP总览

    一.自然语言处理概述 1)自然语言处理:利用计算机为工具,对书面实行或者口头形式进行各种各样的处理和加工的技术,是研究人与人交际中以及人与计算机交际中的演员问题的一门学科,是人工智能的主要内容. 2) ...

  10. turple list dict 互相转换

    1. 字典(dict) dict = {'name': 'Zara', 'age': 7, 'class': 'First'} 1.1 字典---字符串 print (type(str(dict)), ...