首页 > 代码库 > CSS3 perspecitve属性

CSS3 perspecitve属性

<style></style>
M

M
.div1{	position: relative;	height: 150px;	width: 150px;	margin: 0px;	padding:2px;	border: 1px solid black;	perspective:550;	-webkit-perspective:550;	perspective-origin: 50% 100px;	-webkit-perspecitve-origin: 50% 100px;}.div2{	position: absolute;	border: 1px solid black;	background-color: yellow;	transform: rotateX(0deg);	-webkit-transform: rotateX(0deg);	-webkit-animation: rotateXing 1.8s infinite linear;	animation: rotateXing 1.8s infinite linear;	width:148px;	height:148px;	text-align:center;	line-height:148px;}.div3{	position: absolute;	border: 1px solid black;	background-color: green;	transform: rotateY(0deg);	-webkit-transform: rotateY(0deg);	-webkit-animation: rotateYing 2.8s infinite linear;	animation: rotateYing 2.8s infinite linear;	width:148px;	height:148px;	text-align:center;	line-height:148px;}@-webkit-keyframes rotateXing {  from {  	transform: rotateX(1deg);	-webkit-transform: rotateX(1deg);  }  to {    transform: rotateX(359deg);	-webkit-transform: rotateX(359deg);  }}@keyframes rotateXing {   from {  	transform: rotateX(1deg);	-webkit-transform: rotateX(1deg);  }  to {    transform: rotateX(359deg);	-webkit-transform: rotateX(359deg);  }}@-webkit-keyframes rotateYing {  from {  	transform: rotateY(1deg);	-webkit-transform: rotateY(1deg);  }  to {    transform: rotateY(359deg);	-webkit-transform: rotateY(359deg);  }}@keyframes rotateYing {   from {  	transform: rotateY(1deg);	-webkit-transform: rotateY(1deg);  }  to {    transform: rotateY(359deg);	-webkit-transform: rotateY(359deg);  }}