怎么可以讓正方體沿著中心旋轉(zhuǎn)？
怎么可以讓正方體沿著中心旋轉(zhuǎn)？
學(xué)習(xí)之王
2017-09-07
3 回答
舉報
0/150
提交
取消
2021-02-04
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>正方體</title>
</head>
<body>
????<div?class='out-box'>
????????<div?class="inner-box">
????????????<span?class="front?common">前</span>
????????????<span?class="left?common">左</span>
????????????<span?class="right?common">右</span>
????????????<span?class="behind?common">后</span>
????????????<span?class="top?common">上</span>
????????????<span?class="bottom?common">下</span>
????????</div>
????</div>
????<style>
????????body,html{
????????????width:?100%;
????????????height:?100%;
????????????padding:?0;
????????????margin:?0;
????????????background-color:?antiquewhite;
????????}
????????.out-box?{
????????????width:?100%;
????????????height:?100%;
????????????display:?flex;
????????????justify-content:?center;
????????????align-items:?center;
????????????perspective:?5000px;
????????????backface-visibility:?hidden;
????????}
????????.inner-box?{
????????????width:?300px;
????????????height:?300px;
????????????position:?relative;
????????????transform-style:?preserve-3d;
????????????transform:?translatez(-150px)?rotateX(30deg)?rotateY(30deg)?;
????????}
????????.front?{
????????????background-color:?salmon;
????????????transform:translatez(150px);
????????}
????????.behind?{
????????????transform:translatez(-150px);
????????????background-color:?aqua;
????????}
????????.right?{
????????????background-color:?chartreuse;
????????????transform:rotateY(90deg)?translatez(150px)?;
????????}
????????.left?{
????????????background-color:?pink;
????????????transform:rotateY(-90deg)?translatez(150px)?;
????????}
????????.top?{
????????????background-color:?darkcyan;
????????????transform:?rotateX(90deg)?translateZ(150px);
????????}
????????.bottom?{
????????????background-color:?coral;
????????????transform:?rotateX(90deg)?translateZ(-150px);
????????}
????????.inner-box:hover??{
???????????
????????????transform:?translatez(-150px)?rotateX(135deg)?rotateY(45deg)?;
????????????transition:?all?3s;
????????}
????????.common?{
????????????position:?absolute;
????????????left:?0;
????????????right:?0;
????????????top:?0;
????????????bottom:?0;
????????????margin:?auto;
????????????display:?block;
????????????text-align:?center;
????????????font-size:?35px;
????????????font-weight:?bold;
????????????color:?#fff;
????????????width:?300px;
????????????height:?300px;
????????????line-height:?300px;
???????????
????????}
????</style>
</body>
</html>
2018-06-07
加一個關(guān)鍵幀動畫
@-webkit-keyframes s{
??? 0%{
??????? -webkit-transform:rotateY(0);
??? }
??? 100%{
??????? -webkit-transform:rotateY(-359.9deg);
??? }
}
2017-11-20
http://www.w3school.com.cn/cssref/pr_transform-origin.asp
查看這個文檔就可以了，調(diào)整你的transform-origin 在 x y z 三個軸上的位置為 50%