HTML5 3D旋转动画案例

效果
HTML5 3D旋转动画案例_第1张图片

代码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		.container{
			width: 200px;
			height: 200px;
			position: relative;
			margin:50px auto;
			transform: rotateY(15deg) rotateX(-15deg);
			transform-style: preserve-3d;
			animation:xuanzhuan 8s linear infinite;
		}
		@keyframes xuanzhuan{
			0%{
				transform: rotateY(15deg) rotateX(45deg);
			}
			50%{
				transform: rotateY(375deg) rotateX(-45deg);
			}
			100%{
				transform: rotateY(735deg) rotateX(45deg);
			}
		}
		.container:hover{
			animation-play-state: paused;
		}
		.container div.front{
			background: red;
			transform: translateZ(100px);
		}
		.container div.back{
			background: green;
			transform: translateZ(-100px) rotateY(180deg);
		}
		.container div.left{
			background: blue;
			transform:translateX(-100px) rotateY(-90deg);
		}
		.container div.right{
			background: yellow;
			transform:translateX(100px) rotateY(90deg);
		}
		.container div.top{
			background: pink;
			transform:translateY(-100px) rotateX(90deg);
		}
		.container div.bottom{
			background: orange;
			transform:translateY(100px) rotateX(-90deg);
		}
		.container div{
			position: absolute;
			left:0;
			top:0;
			width: 200px;
			height: 200px;
			line-height: 200px;
			text-align: center;
			font-size: 40px;
		}
	style>
head>
<body>
	<div class="container">
		<div class="front">frontdiv>
		<div class="back">backdiv>
		<div class="left">leftdiv>
		<div class="right">rightdiv>
		<div class="top">topdiv>
		<div class="bottom">bottomdiv>
	div>
body>
html>

你可能感兴趣的:(HTML5)