形变

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. 解决UITableView分割线距左边有距离的办法

    首先在viewDidLoad方法中加上如下代码: if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {    ...

  2. OKEX API(Websocket)

    本文介绍OKEX API Websocket WebSocket API for SPOT 开始使用 WebSocket是HTML5一种新的协议(Protocol).它实现了客户端与服务器全双工通信, ...

  3. 网卡配置/etc/network/interfaces

    话说Debian系的网卡配置跟Redhat系很不一样,Redhat是放在/etc/sysconfig/network-scripts目录下面的一大堆文件里面,要修改?你一个一个文件来过吧.Debian ...

  4. 手机e.pageX和e.pageY无效的原因

    手机端拖拽事件: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用prev ...

  5. android(五)----使用WakeLock使Android应用程序保持后台唤醒

    在使用一些产品列如微信.QQ之类的,如果有新消息来时,手机屏幕即使在锁屏状态下也会亮起并提示声音,这时用户就知道有新消息来临了. 但是,一般情况下手机锁屏后,Android系统为了省电以及减少CPU消 ...

  6. decltype类型声明- 现代C++新特性总结

    decltype类型声明 有时会遇到这样的情况:希望从表达式的类型推断出要定义的变量的类型,但不想用该表达式的值去初始化变量.为了满足这一需求,C++11引入了decltype,它的作用是选择并返回操 ...

  7. 万恶之源 - Python基础知识补充

    编码转换 编码回顾: 1. ASCII : 最早的编码. ⾥⾯有英⽂⼤写字⺟, ⼩写字⺟, 数字, ⼀些特殊字符. 没有中⽂, 8个01代码, 8个bit, 1个byte 2. GBK: 中⽂国标码, ...

  8. [py]类和实例方法/内建方法

    内建方法 dir(__builtins__) 类和实例方法对比 class person: def __init__(self, job): self.job = job name = "m ...

  9. （转）Elasticsearch分析聚合

    Elasticsearch不仅仅适合做全文检索,分析聚合功能也很好用.下面通过实例来学习. 一.准备数据 {"index":{ "_index": " ...

  10. [LeetCode] 867. Transpose Matrix_Easy

    Given a matrix A, return the transpose of A. The transpose of a matrix is the matrix flipped over it ...