我有这段代码从中间旋转 hr(一条线)，我想从底部旋转那条线
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
width: 50px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {-webkit-transform: rotate(180deg);}
}
/* Standard syntax */
@keyframes mymove {
50% {transform: rotate(180deg);}
}
</style>
</head>
<body>
<p>Gradually rotate the DIV element 180 degrees, and back:<p>
<div id="myDIV">
<hr>
</div>
如何从底部开始旋转一条线或一张图片，就像一个旋钮在旋转一样
最佳答案
你可以试试。
#myDIV {
margin: auto;
width: 50px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
transform-origin: top left;
}
@-webkit-keyframes mymove {
50% {-webkit-transform: rotate(180deg);}
}
@keyframes mymove {
50% {transform: rotate(180deg);}
}
并根据需要更改 transform-origin 值，它可以是数字。
关于html - 如何将线条或图像从底部旋转 180 度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25841071/