css旋转动画定义中心,旋转时它的旋转中心位置如何 - CSS动画

0

我修改了动画，并增加了transform-origin的微调：d

.spinner-animation{

width: 500px;

height: 500px;

position: relative;

background: gray;

}

.spinner-animation > .spinner{

width: 400px;

height: 400px;

position: absolute;

left: 50%;

top: 50%;

transform-origin: top left;

transform: translate(-50%,-50%);

border-radius: 50%;

box-shadow: inset 3px 3px 3px red;

animation: spinner 1.2s linear infinite;

}

.spinner-animation > .content{

display: inline-block;

width: 300px;

height: 300px;

border-radius: 50%;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

background-color: black;

text-align: center;

line-height: 300px;

color: white;

}

@keyframes spinner {

0% {

transform: rotate(0deg) translate(-50%,-50%);

}

100% {

transform: rotate(360deg) translate(-50%,-50%);

}

}

Loading...

2017-05-07 02:09:29

0

Flex的框溶液：显示作为flex元素的父元素，并对齐(垂直方向)和证明(水平地)其绝对定位的儿童到中心。

.spinner-animation{

width: 500px;

height: 500px;

background: gray;

display: flex;

align-items: center;

justify-content: center;

}

.spinner-animation > .spinner{

width: 400px;

height: 400px;

position: absolute;

border-radius: 50%;

box-shadow: inset 3px 3px 3px red;

animation: spinner 1.2s linear infinite;

}

.spinner-animation > .content{

display: inline-block;

width: 300px;

height: 300px;

border-radius: 50%;

position: absolute;

background-color: black;

text-align: center;

line-height: 300px;

color: white;

}

@keyframes spinner {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

Loading...

2017-05-07 02:02:49

0

把span在另一个容器和应用position: absolute到这个容器

.spinner-animation {

width: 500px;

height: 500px;

position: relative;

background: gray;

}

.holder {

position: absolute;

width: 400px;

height: 400px;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

.holder .spinner {

display: block;

width: 100%;

height: 100%;

border-radius: 50%;

box-shadow: inset 3px 3px 3px red;

animation: spinner 1.2s linear infinite;

}

.spinner-animation>.content {

display: inline-block;

width: 300px;

height: 300px;

border-radius: 50%;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

background-color: black;

text-align: center;

line-height: 300px;

color: white;

}

@keyframes spinner {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

Loading...

2017-05-07 02:03:08

0

在动画中的transform被覆盖translate()定位，您需要将translate()添加到您的动画transform属性中。

.spinner-animation{

width: 500px;

height: 500px;

position: relative;

background: gray;

}

.spinner-animation > .spinner{

width: 400px;

height: 400px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

border-radius: 50%;

box-shadow: inset 3px 3px 3px red;

animation: spinner 1.2s linear infinite;

}

.spinner-animation > .content{

display: inline-block;

width: 300px;

height: 300px;

border-radius: 50%;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

background-color: black;

text-align: center;

line-height: 300px;

color: white;

}

@keyframes spinner {

0% {

transform: translate(-50%,-50%) rotate(0deg);

}

100% {

transform: translate(-50%,-50%) rotate(360deg);

}

}

Loading...

2017-05-07 02:08:37