形变

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. ios-Objective-C中的各种遍历（迭代）方式(转载)

    iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https:// ...

  2. LoadRunner-关联问题(栏目列表较多关联不了想要的id)

    新建了课程后之后有很多栏目,每个栏目对应一个partid,但我只想要期中一个. http://*********/course/work/workInfo.action?hwid=1547&c ...

  3. JPA 解析

    看图想想相关的架构 1.查询表达式中的接口层次结构 2.CriteriaQuery 封装了传统查询的子句 3.Metamodel API 中的持久化类型的接口的层次结构 4. Metamodel AP ...

  4. ext3日志模式

    ext3日志模式 http://blog.sina.com.cn/s/blog_5d4ab4b40100dosx.html ext3支持多种日志模式 ext3 是ext2文件系统的高一级版本,完全兼容 ...

  5. hadoop学习---运行第一个hadoop实例

    hadoop环境搭建好后,运行第wordcount示例 1.首先启动hadoop:sbin/start-dfs.sh,sbin/start-yarn.sh(必须能够正常运行)   2.进入到hadoo ...

  6. 万恶之源 - Python数据类型二

    列表 列表的介绍  列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型. 比如JS中的数 组, java中的数组等等. 它是以[ ]括起来, 每个元素用' , '隔开而且可以存放各 ...

  7. javascript脚本实现浏览器自动点击（阿里员工秒杀月饼）

    原文地址https://blog.csdn.net/ani521smile/article/details/52575063 秒杀活动页面 <!DOCTYPE HTML> <html ...

  8. react native 示例代码

    https://react.rocks/tag/ReactNative?show=60 https://github.com/ReactNativeNews/React-Native-Apps

  9. 兼容安卓和ios实现一键复制内容到剪切板

    实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  10. office word 2010 怎么把左侧的标题大纲调出来？

    有时候打开Word很希望出现左边的大纲,可是有时候就不出来,对word一些操作都忘得差不多了,这个小问题确实还是让我迷糊了一下~~ 网上的解决方案是: 打开Word2010文档窗口,切换到“视图”功能 ...