形变

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. PAC 自动代理

    最近看了 HTTP权威指南 里面有关于  代理的介绍,代理有很多种,今天主要来说说 自动代理PAC PAC(Proxy Auto Config) 是一个 Script:经由编写这个 Script,我们 ...

  2. php 实现栈结构

    一.栈的定义及知识 1.定义:栈又称为栈或者堆叠,是计算机科学中的一种特殊的串列形式的抽象数据类型,特殊之处在于只允许在链表或者数组的一端(堆栈顶端指针,又称 "top")加入数据 ...

  3. C++三大特性之继承

    原文地址:https://qunxinghu.github.io/2016/09/12/C++%20%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7%E4%B9%8B%E7%B ...

  4. 【Python】web.py-简单轻量级网页框架python

    简单轻量级网页框架python web.py的安装 python 3.x中安装web.py 最近决定从python2.7转移到3.x上工作. 使用数据库的时候,依然选用了之前比较感兴趣的web.py ...

  5. OC导航栏自定义返回按钮

    [iOS]让我们一次性解决导航栏的所有问题 在默认情况下,导航栏返回按钮长这个样子   导航栏默认返回按钮 导航栏左上角的返回按钮,其文本默认为上一个ViewController的标题,如果上一个Vi ...

  6. Jquery WeUI（一）

    用于微信端的控件UI , 首先,需要做的是开发一个微信能访问的网页,并和微信关联 A． 创建一个空网站 B． 增加一般处理程序 A． 增加 web 网页 和空文件到项目中 B． 申请和配置测试服务 创 ...

  7. java-JProfiler（三）-进行本地JVM的性能监控-监视本地java程序

    1.打开JProfiler 默认会启动快速窗口[或者使用菜单Session→Start Center]打开 这里监视本地java程序,故在 主界面 2.查看监视界面 这时就可以查看 Instance ...

  8. [javascript]编码&i字符串格式化&nput历史记录&清空模态框

    js中编码问题 https://www.haorooms.com/post/js_escape_encodeURIComponent 我在前端js添加时候创建dom时候,有汉字,发现是乱码就研究了下 ...

  9. libSVM简介及核函数模型选择

    1. libSVM简介 训练模型的结构体 struct svm_problem //储存参加计算的所有样本 { int l; //记录样本总数 double *y; //指向样本类别的组数 struc ...

  10. keras搭建密集连接网络/卷积网络/循环网络

    输入模式与网络架构间的对应关系: 向量数据:密集连接网络(Dense层) 图像数据:二维卷积神经网络 声音数据(比如波形):一维卷积神经网络(首选)或循环神经网络 文本数据:一维卷积神经网络(首选)或 ...