Question

这是我的代码：

HTML

<div id="back">
   <div id="right_text">TEST</div>
   <div id="left_text">TEST2</div>
</div>
<div id="mid"></div>

CSS

#mid {
    border: 1px solid black;
    height: 100px;
    width: 100px;
    -webkit-animation: rotate linear 5s;
    -webkit-animation-iteration-count: infinite;
    margin:auto;
    margin-top:-125px;
    position: static;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
#back {
    width:auto;
    height: 150px;
    border: 1px solid red;
    -webkit-animation: rotateY linear 5s;
    -webkit-animation-iteration-count: infinite;
    position: static;
}
@-webkit-keyframes rotateY {
    from {
        -webkit-transform: rotateY(0deg)
    }
    to {
        -webkit-transform: rotateY(360deg)
    }
}
#right_text {
    border: 1px solid green;
    height: 75px;
    width: 75px;
    float: right;
    margin-top: 35px;
    text-align: center;
}
#left_text {
    border: 1px solid green;
    height: 75px;
    width: 75px;
    float: left;
    margin-top: 35px;
    text-align: center;
}

http://jsfiddle.net/bXhL8/

正如您所看到的，当文本div不在原点时，它们都面向屏幕。我希望他们两个都保持不变，只是“挂在”我的后背的旋转。

我的问题是，如果单独使用css或者id需要js就可以了。

Answer 1

将以下内容添加到您的css

#left_text, #right_text {
 -webkit-animation: rotateY linear 5s;
 -webkit-animation-iteration-count: infinite;
}

JSFiddle

<强>更新

Updated JSFiddle

Answer 2

这是我的新代码。它还不是一个完美的圆圈，因为我刚刚为我的@keyframes添加了4帧。我正在考虑进行实际的循环旋转并将skew（）元素添加到整个圆形函数/我的整个身体，不知道这是否会起作用。

感谢您的帮助！

HTML：

<div id="right_text">
    <div id="right_text_text">TEST</div>
</div>
<div id="left_text">
    <div id="left_text_text">TEST2</div>
</div>
<div id="mid"></div>

的CSS：

#mid {
    border: 1px solid black;
    background-color: red;
    height: 100px;
    width: 100px;
    -webkit-animation: rotate linear 5s;
    -webkit-animation-iteration-count: infinite;
    margin-top: 105px;
    margin-left: 210px;
    position: static;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}

#right_text_text {
    border: 1px solid black;
    text-align: center;
    position: absolute;
    width: 50px;
    -webkit-animation: downupright linear 8s infinite;
}

#left_text_text {
    border: 1px solid black;
    text-align: center;
    position: absolute;
    width: 50px;
    -webkit-animation: updownleft linear 8s infinite;
}

@-webkit-keyframes downupright {
    0% { left: 490px; top: 150px;}
    25% { left: 245px; top: 100px; z-index: -10;}
    50% { left: 0px; top: 150px;}
    75% { left: 245px; top: 200px; z-index:10;}
    100% { left: 490px; top: 150px;}
}

@-webkit-keyframes updownleft {
    0% { left: 0px; top: 150px;}
    25% { left: 245px; top: 200px; z-index: 9;}
    50% { left: 490px; top: 150px;}
    75% { left: 245px; top: 100px; z-index: -9;}
    100% { left: 0px; top: 150px;}
}

http://jsfiddle.net/bXhL8/4/

Div始终面向rotateY div内的屏幕

2 个答案: