CSS3 3D旋转动画代码实例

2020-01-27 14:18:20

字体：大中小

来源：转载

供稿：网友

CSS3 3D旋转动画代码实例，本CSS3特效主要使用的是Transform属性实现，它是“变型”的意思，值主要包括：旋转rotate，扭曲skew，缩放scale，移动translate以及矩阵变形matrix 。通过这个实例，你将会学会如何使用它实现css3 3D动画。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{margin:0;padding:0;}.wrapper1{	width:150px;	height:191px;	border:#eee 1px solid;	border-radius:10px;	padding:2px;	float:left;	margin:200px 0 0 50px;	-moz-perspective:800px;  	-moz-transform-style:preserve-3d;  	-webkit-perspective:800px;  	-webkit-transform-style:preserve-3d;  	-moz-backface-visibility:;    -webkit-backface-visibility:hidden;}.box1{	width:150px;	height:191px;	background:url(http://www.caihong.cc/wp-content/uploads/2012/10/nut.jpg);	border-radius:10px;	-webkit-animation-name:wobble;  -webkit-animation-duration: 5s;  -webkit-animation-timing-function: linear;  -webkit-animation-delay: 0;  -webkit-animation-iteration-count: infinite;  -webkit-animation-direction: ;  -moz-animation-name:wobble;  -moz-animation-duration: 5s;  -moz-animation-timing-function: linear;  -moz-animation-delay: 0;  -moz-animation-iteration-count: infinite;  -moz-animation-direction: ;}@-webkit-keyframes wobble{     0% {  		-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     25% {  		-webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     50% {  		-webkit-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     75% {  		-webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     100% {  		-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }  }@-moz-keyframes wobble{     0% {       	-moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     25% {       	-moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     50% {       	-moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     75% {       	-moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }     100% {       	-moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);     }  }</style></head><body><div class="wrapper1">	<div class="box1"></div></div></body></html>

上一篇：CSS3绘图实例代码

下一篇：CSS3绘制灰太狼动画，绝对精彩

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注