大佬教程收集整理的这篇文章主要介绍了html – css3在3D立方体中的转换问题,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
但它的旋转是基于立方体的一面!
我想从它的中心旋转它,like in this example.我正在尝试transform-origin属性,但没有得到期望的结果.
我也试过把一架中间飞机放在立方体内,但悬停在这种情况下是不行的!
.contain { width: 300px; height: 300px; -webkit-perspective: 500px; perspective: 500px; position: absolute; } .main { position:relative; width:100px; height:100px; margin:100px 100px; BACkground:#07a; overflow:visible; transition: all linear,transform cubic-bezier(0.4,0.25,0.14,1.5),BACkground cubic-bezier(0.4,1.5); transition-duration: 700ms; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: center center; } .main:hover{ transform:rotateY(180deg); } .top,.right,.left,.bottom,.lid{ position:absolute; width:100px; height:100px; z-indexd:999; transition: all 1s ease; } .top { BACkground:crimson; top:-100px; transform-origin : 50% 100%; transform:rotateX(-90deg); } .bottom { BACkground:crimson; bottom:-100px; transform-origin :100% 0%; transform:rotateX(90deg); } .left { BACkground:#ccc; left:-100px; transform-origin :100% 0%; transform:rotateY(90deg); } .right { BACkground:#ccc; right:-100px; transform-origin : 0% 0%; transform:rotateY(-90deg); } .lid { BACkground:#07a; transform: translateZ(170pX); transform-origin : 0% 0%; transform:translateZ(100pX); }
<div class="contain"> <div class="main"> <div class="lid"></div> <div class="top"></div> <div class="right"></div> <div class="left"></div> <div class="bottom"></div> </div> </div>
所以应该是
transform-origin: center center 50px;
因为你的立方一边是100px
.contain { width: 300px; height: 300px; -webkit-perspective: 500px; perspective: 500px; position: absolute; } .main { position:relative; width:100px; height:100px; margin:100px 100px; BACkground:#07a; overflow:visible; transition: all linear,1.5); transition-duration: 700ms; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: center center 50px; } .main:hover{ transform:rotateY(180deg); } .top,.lid{ position:absolute; width:100px; height:100px; z-indexd:999; transition: all 1s ease; } .top { BACkground:crimson; top:-100px; transform-origin : 50% 100%; transform:rotateX(-90deg); } .bottom { BACkground:crimson; bottom:-100px; transform-origin :100% 0%; transform:rotateX(90deg); } .left { BACkground:#ccc; left:-100px; transform-origin :100% 0%; transform:rotateY(90deg); } .right { BACkground:#ccc; right:-100px; transform-origin : 0% 0%; transform:rotateY(-90deg); } .lid { BACkground:#07a; transform: translateZ(170pX); transform-origin : 0% 0%; transform:translateZ(100pX); }
<div class="contain"> <div class="main"> <div class="lid"></div> <div class="top"></div> <div class="right"></div> <div class="left"></div> <div class="bottom"></div> </div> </div>
以上是大佬教程为你收集整理的html – css3在3D立方体中的转换问题全部内容,希望文章能够帮你解决html – css3在3D立方体中的转换问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。