CSS3 旋转 transform: rotate(0deg)

默认分类 2019/02/11 10:49

示例地址：http://haiyang.me/css3/rotate.html

代码如下：

<style type="text/css">


.stage {
  position: relative;
  border: 1px solid green;
  left: 200px;
  height: 426px;
}
.stage .bar {
  transform: rotate(0deg) scale(1, 1) translate(0px, 0px) skew(0deg, 0deg);
  transform-origin: 50% 50% 0px;
  position: absolute;
  z-index: 100;
  top: 362px;
  left: 44px;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-in-out;

  font-size: 1px;
  background-color: #333;
  width: 100px;
  height: 4px;
  overflow: hidden;
}

.stage .bar2 {
  transform: rotate(720deg) scale(1, 1) translate(0px, 0px) skew(0deg, 0deg);
  top: 462px;
}

</style>
<div style="position: absolute;left: -500px; top: -500px;">
  <img src="duck01.gif" alt="">
  <img src="duck02.gif" alt="">
</div>
  <button onclick="doit1()">doit1</button>
  <button onclick="doit2()">doit2</button>

<div class="stage" >
  <span id="bar" class="bar"> </span>
</div>
<script>

function doit1() {
  document.getElementById('bar').className = 'bar bar2'
}

function doit2() {
  document.getElementById('bar').className = 'bar'
}

</script>

>> 留言评论