1
Q
变换翻译旋转订单
A
回答
0
希望这有助于
考虑两个变换命令:
transform: translateX(value px) rotateY(value deg);
在这种情况下旋转Y首先完成,然后平移X,你会得到一个破碎的立方体,因为transform-origin
property.If你删除它将是完美的。
将transform-origin属性应用于平移变换 函数在结果中没有明显的视觉差异。 这是因为被变换影响的元素被移动而没有 更改其形状,大小或旋转。
.wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
margin-top: 150px;
}
.cube {
position: relative;
width: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: spin 10s linear infinite;
animation: spin 10s linear infinite;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
color: #66cc00;
background: pink;
}
.cube .back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.cube .front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.cube .right {
-webkit-transform: translateX(100px) rotateY(-270deg);
transform: translateX(100px) rotateY(-270deg);
}
.cube .left {
-webkit-transform: translateX(-100px) rotateY(270deg);
transform: translateX(-100px) rotateY(270deg);
}
.cube .top {
-webkit-transform: translateY(-100px) rotateX(-90deg);
transform: translateY(-100px) rotateX(-90deg);
}
.cube .bottom {
-webkit-transform: translateY(100px) rotateX(90deg);
transform: translateY(100px) rotateX(90deg);
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
2. transform: rotateX(value deg) translateY(value px);
在这种情况下平移Y做第一,然后rotateX,所以你需要变换原点property.It允许你改变的变换位置元素。
点在这里变换原点被应用于rotateX作为其处理完毕second.Thus 变换原点改变指元件变换 而不是移动整个元件
相关问题
- 1. 旋转+翻译?
- 2. 旋转,翻译?
- 3. D3转换:旋转和翻译
- 4. 旋转和翻译
- 5. 在openCV中使用SolvePnP旋转和翻译订单问题
- 6. OpenGL的 - 翻译后旋转
- 7. OpenGl旋转和翻译
- 8. OpenGL链接翻译/旋转
- 9. 组合旋转和翻译
- 10. 3D旋转被翻译
- 11. jmonkey旋转和翻译
- 12. javascript旋转翻译功能
- 13. 旋转元素的翻译
- 14. 旋转后翻译UIView
- 15. wpf旋转和翻译文本块上的变换问题
- 16. 翻译转:SVG不是围绕中心旋转,即使翻译:
- 17. 旋转之前翻译或翻译之前旋转吗?它有什么不同?
- 18. 订单序列的翻转
- 19. 旋转变换
- 20. 如何使用vtk旋转/翻译/翻转vtkActor2D对象?
- 21. OpenGL ES 2旋转后的翻译
- 22. XNA - 渲染树旋转和翻译
- 23. 使用NSTimer旋转和翻译UIImageView
- 24. OpenGL旋转和翻译问题
- 25. WebGL交互,旋转后翻译
- 26. Java GUI旋转和矩形的翻译
- 27. Android:同步翻译和旋转动画
- 28. 统一5对象翻译和旋转
- 29. 计算翻译后的旋转中心
- 30. OpenGL中的翻译和旋转?