css3动画与web存储

css3动画

transform:向元素应用 2D 或 3D 转换

perspective:规定 3D 元素的透视效果。

transform-style:规定被嵌套元素如何在 3D 空间中显示。

transition:简写属性，用于在一个属性中设置四个过渡属性。

transition-property:规定应用过渡的 CSS 属性的名称。

@keyframes:规定动画。@keyframes animationname {keyframes-selector {css-styles;}}

animation:所有动画属性的简写属性，除了 animation-play-state 属性。animation: name duration timing-function delay iteration-count direction;

旋转立方体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				padding: 0;
				margin: 0;
			}
			#cube{
				margin: 300px auto;
				width: 400px;
				height: 400px;
				position: relative;
				/*transition: all 5s linear;*/ 
				/*transform: rotateX(200deg) rotateY(60deg) rotateZ(60deg);*/
				/*perspective: 1000px;*/
				transform-style: preserve-3d;
				animation: mymove 5s linear infinite;
			}
			/*#cube:hover{
				transform: rotateX(1200deg) rotateY(600deg) rotateZ(600deg);
			}*/
			#back,#front,#left,#right,#top,#bottom{
				width: 400px;
				height: 400px;
				position: absolute;
				font-size: 30px;
				line-height: 400px;
				text-align: center;
				top:0;
				left:0;
			}
			#left{
				background: blue;
				transform: rotateY(90deg) translateZ(-200px);
			}
			#right{
				background: greenyellow;
				transform: rotateY(90deg) translateZ(200px);
			}
			#top{
				background: darkred;
				transform: rotateX(90deg) translateZ(200px);	
			}
			#bottom{
				background: palevioletred;
				transform: rotateX(90deg) translateZ(-200px);	
			}
			#front{
				background: purple;
				transform:translateZ(200px);
			}
			#back{
				background: fuchsia;
				transform:translateZ(-200px);
			}
			@keyframes mymove
			{
				0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
				100%{transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);}
			}
		</style>
	</head>
	<body>
		<div id="cube">
			<div id="front">前面</div>
			<div id="back">后面</div>
			<div id="left">左面</div>
			<div id="right">右面</div>
			<div id="top">上面</div>
			<div id="bottom">下面</div>
		</div>
	</body>
</html>

web存储

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

sessionStorage