html – css3在3D立方体中的转换问题

概述我已经创建了css-cube及其旋转：hover. 但它的旋转是基于立方体的一面！ 我想从它的中心旋转它,like in this example.我正在尝试transform-origin属性,但没有得到期望的结果. 我也试过把一架中间飞机放在立方体内,但悬停在这种情况下是不行的！ .contain { width: 300px; height: 300px; -webk 我已经创建了css-cube及其旋转：hover.

但它的旋转是基于立方体的一面！

我想从它的中心旋转它,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 >            <div >                <div ></div>                <div ></div>                <div ></div>                <div ></div>                <div ></div>            </div>        </div>

解决方法 问题是您需要将变形原点设置在立方体的中心,多维数据集是3d元素.你缺少第三维！

所以应该是

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 >            <div >                <div ></div>                <div ></div>                <div ></div>                <div ></div>                <div ></div>            </div>        </div>

总结

以上是内存溢出为你收集整理的html – css3在3D立方体中的转换问题全部内容，希望文章能够帮你解决html – css3在3D立方体中的转换问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。