Question

我有demo。如图所示，元素围绕其中心旋转，但我正在尝试让它围绕其左边界（或左轴或y轴？）旋转。这可能吗？

这是我的HTML

<div id="parent">
    <div class="item">Rotate</div>
</div>

和css

#parent {
    -webkit-perspective: 850px ;
    margin-left: 200px ;
}
.item {    
    -webkit-transform-style: preserve-3d ;
    -webkit-transition: -webkit-transform 5s linear ;
    background-color: grey ;
    width: 200px ;
    -webkit-tranform-origin: top left 0 ;
}
.item.rotate {
    -webkit-transform: rotateY(180deg) ;
}

使用javascript我将类旋转添加到div.item，以便它开始旋转。

Answer 1

你有一个错字

-webkit-tranform-origin: top left 0 ;

我把它改成了

-webkit-transform-origin: top left 0;

我认为这就是你的工作方式（？）DEMO

css3：元素总是围绕中心旋转

1 个答案: