今天的例子中,我主要想讲的是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流畅度不是很好)
感谢您的阅读,本文由 蓝色梦想 版权所有。如若转载,请注明出处:蓝色梦想 - CSS3 制作3D旋转球体
Pingback 引用通告: 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理 - 站壳网
Pingback 引用通告: 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理 - SEOOS技术门户
Pingback 引用通告: CSS3 3D 行星运转以及浏览器渲染原理 – IT知库
Pingback 引用通告: CSS3 3D 行星运转以及浏览器渲染原理 – 码农网
Pingback 引用通告: 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理 | 解决方案 | IT技术社区