今天的例子中,我主要想讲的是transform-style:preserve-3d和box-sizing:border-box这两个属性。

对于preserve-3d,这里要说明的是,它只影响这个元素的子元素(二级元素),孙元素(三级元素)如果也想拥有3D模式,那么就必须给它的上级元素(父元素)也添加preserve-3d。

box-sizing是我们平时比较少接触到的属性,其分辨有2个值content-box和border-box。
content-box:此属性表现为标准模式下的盒模型(当我们设置元素的width和height时,它的宽度不包括border和padding。例:width:100px; border-width:10px; 元素实际宽度为220px;)
border-box:此属性表现为怪异模式下的盒模型(和content-box相反,它的宽度包含border和padding。例:width:100px; border-width:10px; 此时的border相当于内边距,元素实际宽度仍为200px;)

好了,接下来我们就看例子吧:

HTML CODE:

<div class="wrap">
	<div class="inner"></div>
	<div class="x">
		<div class="x1"></div>
		<div class="x2"></div>
		<div class="xInner"></div>
		<div class="y"></div>
		<div class="y1"></div>
		<div class="y2"></div>
		<div class="yInner"></div>
		<div class="z"></div>
		<div class="z1"></div>
		<div class="z2"></div>
		<div class="zInner"></div>
	</div>
</div>

CSS CODE:

* {
	margin:0; padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background:black;
}
.wrap {
	margin: 150px auto;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.wrap, .x, .y, .z {
	width: 200px;
	height: 200px;
	border-radius: 50%;
}
.x1, .x2, .y, .y1, .y2, .z, .z1, .z2 , .xInner , .yInner , .zInner {
	position: absolute;
}
.x1,.x2,.y1,.y2,.z1,.z2 {
	width: 87.5%;
	height: 87.5%;
	border-radius: 50%;
}
.x {
	position: relative;
	border: 1px solid #FF0099;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation: mymove 10s linear infinite;
	-moz-animation: mymove 10s linear infinite;
	-ms-animation: mymove 10s linear infinite;
	animation: mymove 10s linear infinite;
}
.y {
	top: 0; left: 0;
	border: 2px solid #0099FF;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	transform: rotateX(90deg);
}
.z {
	top: 0; left: 0;
	border: 1px solid #FFCC33;
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	transform: rotateY(90deg);
}
.x1 {
	top: 6.25%; left: 6.25%;
	border: 1px solid #FF0099;
	-webkit-transform: translateZ(50px);
	-moz-transform: translateZ(50px);
	-ms-transform: translateZ(50px);
	transform: translateZ(50px);
}
.x2 {
	top: 6.25%; left: 6.25%;
	border: 1px solid #FF0099;
	-webkit-transform: rotateX(180deg) translateZ(50px);
	-moz-transform: rotateX(180deg) translateZ(50px);
	-ms-transform: rotateX(180deg) translateZ(50px);
	transform: rotateX(180deg) translateZ(50px);
}
.y1 {
	top: 6.25%; left: 6.25%;
	border: 1px solid #0099FF;
	-webkit-transform: rotateX(90deg) translateZ(50px);
	-moz-transform: rotateX(90deg) translateZ(50px);
	-ms-transform: rotateX(90deg) translateZ(50px);
	transform: rotateX(90deg) translateZ(50px);
}
.y2 {
	top: 6.25%; left: 6.25%;
	border: 1px solid #0099FF;
	-webkit-transform: rotateX(270deg) translateZ(50px);
	-moz-transform: rotateX(270deg) translateZ(50px);
	-ms-transform: rotateX(270deg) translateZ(50px);
	transform: rotateX(270deg) translateZ(50px);
}
.z1 {
	top: 6.25%; left: 6.25%;
	border: 1px solid #FFCC33;
	-webkit-transform: rotateY(90deg) translateZ(50px);
	-moz-transform: rotateY(90deg) translateZ(50px);
	-ms-transform: rotateY(90deg) translateZ(50px);
	transform: rotateY(90deg) translateZ(50px);
}
.z2 {
	top: 6.25%; left: 6.25%;
	border: 1px solid #FFCC33;
	-webkit-transform: rotateY(270deg) translateZ(50px);
	-moz-transform: rotateY(270deg) translateZ(50px);
	-ms-transform: rotateY(270deg) translateZ(50px);
	transform: rotateY(270deg) translateZ(50px);
}
.xInner {
	border: 1px solid #FF0099;
	width: 100%;
	top: 50%;
}
.yInner {
	height: 100%;
	left: 50%;
	border: 1px solid #0099FF;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	transform: rotateX(90deg);
}
.zInner {
	height: 100%;
	left: 50%;
	border: 1px solid #FFCC33;
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	transform: rotateY(90deg);
}

@-webkit-keyframes mymove
{
	100% { -webkit-transform:  rotateX(360deg) rotateY(180deg) }
}
@-moz-keyframes mymove
{
	100% { -moz-transform:  rotateX(360deg) rotateY(360deg) }
}
@-ms-keyframes mymove
{
	100% { -ms-transform:  rotateX(360deg) rotateY(360deg) }
}
@keyframes mymove
{
	100% { transform:  rotateX(360deg) rotateY(360deg) }
}

测试环境:Chrome、Safari、Firefox(FF流畅度不是很好)

DemoDownload

感谢您的阅读,本文由 蓝色梦想 版权所有。如若转载,请注明出处:蓝色梦想 - CSS3 制作3D旋转球体