如何仅顺时针旋转圆圈

时间：2015-01-13 09:43:33

标签： javascript html5 css3

我正在使用HTML5和CSS3。 我想点击它时顺时针旋转所有圆圈。 为了旋转圆圈，我只使用了CSS。 我已添加html和css相同，所有圆圈在点击它们时都会旋转，点击它的圆圈会突出显示，并显示为白色圆圈。

/* Just for positioning the menu correctly */

#menu {
  position: relative;
  width: 230px;
  margin: 0px auto;
  top: 100px;
  left: 37px;
}
/* We're using overflow: hidden; so we need to create a fake shadow */

.faux-shadow {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 0px;
  left: 0px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
  border-radius: 300px;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
  z-index: -9999;
}
/* Also change the width and height of the faux shadow */

#on-check:checked ~ .faux-shadow {
  width: 250px;
  height: 250px;
  top: -75px;
  left: -60px
}
/* So the info divs wont appear should the button be unchecked */

#menu #on-check:not(:checked) ~ .info {
  opacity: 0;
}
/* Show info sections with a delay of 0.4s to give the menu time to finish the inital
   sprawling out animation */

#menu #on-check:checked ~ .info {
  -webkit-transition: all 0.2s linear 0.4s;
  -moz-transition: all 0.2s linear 0.4s;
  -ms-transition: all 0.2s linear 0.4s;
  -o-transition: all 0.2s linear 0.4s;
  transition: all 0.2s linear 0.4s;
}
/* Sprawl out the menu items when the on button is checked */

#on-check:checked ~ #menu-items {
  width: 250px;
  height: 250px;
  left: -60px;
  top: -75px;
}
/* The styling of the menu items container div */

#menu-items {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background: rgb(255, 255, 5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -99;
  overflow: hidden;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
/* I separated the pieces of the menu into two divs, top and bottom. */

#menu-items .top,
#menu-items .bottom {
  width: 100%;
  float: left;
  z-index: 1;
  height: 50%;
}
#menu-items .bottom {
  top: 50%;
}
/* The middle div is largely to fix a bug where the content would exceed the 
   border radius when overflow: hidden; was set */

#menu-items .middle {
  height: 100%;
  white-space: nowrap;
}
/* ------------------------------------------------------------ */

/* The labels are what contain the icons */

#menu-items label {
  position: absolute;
  z-index: 9999999;
  font-size: 2em;
  border-radius: 5px;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
}
/* On hover I thought they looked nice with a little blue glow! */

#menu-items label:hover {
  text-shadow: 0 0 15px #a6d8f4;
}
/* The is the info boxes, these appear when the menu item is selected */

#menu .info {
  opacity: 0;
  position: absolute;
  right: -225px;
  top: -63px;
  display: inline-block;
  background-color: #d2d2d2;
  padding: 10px;
  color: #343434;
  z-index: 9999999;
  font: normal normal 1.5em Arial, sans-serif;
  background: #4aacc5;
  border: 1px solid #ddd;
  font-weight: normal;
  border-radius: 8px;
  width: 200px;
}
.arrow-img {
  position: absolute;
  top: -106px;
  left: 45px;
}
.arrow-img img {
  height: 30px;
  width: 30px
}
.info span {
  width: 30px;
  height: 30px;
  background: #FFF;
  border-radius: 100%;
  margin: 0px 5px 0 2px;
  float: left;
}
/* Hide the radio and checkboxes */

#menu input[type='checkbox'],
input[type='radio'] {
  display: none;
}
/* Position the icons correctly */

#menu-items .top .ss-home {
  top: 90px;
  left: 34px;
}
#menu-items .top .ss-heart {
  top: 89px;
  left: 199px;
}
#menu-items .top .ss-compass {
  top: 21px;
  left: 108px;
}
#menu-items .bottom .ss-rss {
  top: 92px;
  left: 21px;
}
#menu-items .bottom .ss-star {
  top: 181px;
  left: 162px;
}
#menu-items .bottom .ss-refresh {
  top: 183px;
  left: 60px;
}
/* The below code rotates the menu items to the correct position
   when each is clicked. */

#info-home:checked ~ #menu-items,
#menu-items .top .ss-heart {
  -webkit-transform: rotateZ(50deg);
  -moz-transform: rotateZ(50deg);
  -ms-transform: rotateZ(50deg);
  -o-transform: rotateZ(50deg);
  transform: rotateZ(50deg);
  -webkit-transition: -webkit-transform 1s ease-in;
  transition: 1s ease-in;
}
#info-heart:checked ~ #menu-items,
#menu-items .top .ss-home {
  -webkit-transform: rotateZ(-77deg);
  -moz-transform: rotateZ(-77deg);
  -ms-transform: rotateZ(-77deg);
  -o-transform: rotateZ(-77deg);
  transform: rotateZ(-77deg);
  -webkit-transition: -webkit-transform 1s ease-in;
  transition: 1s ease-in;
}
#info-rss:checked ~ #menu-items,
#menu-items .bottom .ss-star {
  -webkit-transform: rotateZ(77deg);
  -moz-transform: rotateZ(77deg);
  -ms-transform: rotateZ(77deg);
  -o-transform: rotateZ(77deg);
  transform: rotateZ(77deg);
  -webkit-transition: -webkit-transform 1s ease-in;
  transition: 1s ease-in;
}
#info-star:checked ~ #menu-items,
#menu-items .bottom .ss-rss {
  -webkit-transform: rotateZ(-148deg);
  -moz-transform: rotateZ(-148deg);
  -ms-transform: rotateZ(-148deg);
  -o-transform: rotateZ(-148deg);
  transform: rotateZ(-148deg);
  -webkit-transition: -webkit-transform 1s ease-in;
  transition: 1s ease-in;
}
#info-refresh:checked ~ #menu-items,
#menu-items .bottom .ss-refresh {
  -webkit-transform: rotateZ(145deg);
  -moz-transform: rotateZ(145deg);
  -ms-transform: rotateZ(145deg);
  -o-transform: rotateZ(145deg);
  transform: rotateZ(145deg);
  -webkit-transition: -webkit-transform 1s ease-in;
  transition: 1s ease-in;
}
/* --------------------------------------------------------------- */

#menu-items label {
  background: orange;
  width: 30px;
  height: 30px;
  float: left;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 0px 7px 1px #E2F724;
  -moz-box-shadow: 0px 0px 7px 1px #E2F724;
  -webkit-box-shadow: 0px 0px 7px 1px #E2F724;
}
/* Highlight the selected item */

#info-home:checked ~ #menu-items .ss-home,
#info-heart:checked ~ #menu-items .ss-heart,
#info-rss:checked ~ #menu-items .ss-rss,
#info-star:checked ~ #menu-items .ss-star,
#info-refresh:checked ~ #menu-items .ss-refresh,
#info-compass:checked ~ #menu-items .ss-compass {
  box-shadow: 0px 0px 9px 5px #D3CFCF;
  background: #fff;
  border-radius: 100%;
}
/* Make opacity of the info boxes 1 when they are clicked on */

#info-home:checked ~ .home-info,
#info-heart:checked ~ .heart-info,
#info-rss:checked ~ .rss-info,
#info-star:checked ~ .star-info,
#info-refresh:checked ~ .refresh-info,
#info-compass:checked ~ .compass-info {
  opacity: 1;
}
/* ================ IGNORE ================ */

#header {
  width: 100%;
  line-height: 30px;
  margin: 50px auto;
  text-align: center;
}
<div id="menu">

  <input type="checkbox" id="on-check" name="on-check" checked />

  <!--<label id="on-button" for="on-check">
	</label>-->
  <div class="arrow-img">
    <img src="images/down-arrow.png">
  </div>
  <input type="radio" id="info-compass" name="radio-check" checked />
  <input type="radio" id="info-heart" name="radio-check" />
  <input type="radio" id="info-rss" name="radio-check" />
  <input type="radio" id="info-refresh" name="radio-check" />
  <input type="radio" id="info-star" name="radio-check" />

  <div id="menu-items">
    <div class="middle">
      <div class="top">
        <label class="ss-compass" for="info-compass">com</label>
        <label class="ss-heart" for="info-heart">heart</label>
      </div>
      <div class="bottom">
        <label class="ss-rss" for="info-rss">rssB</label>
        <label class="ss-refresh" for="info-refresh">refrB</label>
        <label class="ss-star" for="info-star">starB</label>
      </div>
    </div>

  </div>


  <div class="info compass-info"><span></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
    book. It has survived not only five centuries.</div>
  <div class="info heart-info"><span></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
    book.Also the leap into electronic typesetting, remaining essentially unchanged.</div>
  <div class="info rss-info"><span></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
    book.</div>
  <div class="info star-info"><span></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged.</div>
  <div class="info refresh-info"><span></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged.</div>

  <div class="faux-shadow"></div>
</div>

fiddle

2 个答案:

答案 0 :(得分：1)

这是一个例子： http://jsfiddle.net/sxfzymst/

抱歉，对于数学上的不好，所以只有所有可能的轮换班次才能通过切换。

html（添加onclick）：

<input type="radio" id="info-compass" name="radio-check" onclick='rotateTo(0)' checked  />
<input type="radio" id="info-heart" name="radio-check" onclick='rotateTo(1)' />
<input type="radio" id="info-rss" name="radio-check" onclick='rotateTo(4)' />
<input type="radio" id="info-refresh" name="radio-check" onclick='rotateTo(3)' />
<input type="radio" id="info-star" name="radio-check" onclick='rotateTo(2)' />

css（删除了跨浏览器转换属性）：

#info-star:checked ~ #menu-items, #menu-items .bottom .ss-rss { 
     -webkit-transition: -webkit-transform 1s ease-in;
     transition: 1s ease-in;
}

JS：

var currentRotatePosition = 0;
var currentDegree = 0;

function rotateTo(newPosition)
{
    var shift = 0;
    switch(currentRotatePosition)    
    {
        case 0:
            switch(newPosition)
            {
                // other cases
            }
    }
}

$('#menu-items, #menu-items .bottom .ss-refresh').css({
    '-webkit-transform': 'rotateZ('+ currentDegree +'deg)',
    '-moz-transform': 'rotateZ('+ currentDegree +'deg)',
    '-ms-transform': 'rotateZ('+ currentDegree +'deg)',
    '-o-transform': 'rotateZ('+ currentDegree +'deg)',
    'transform': 'rotateZ('+ currentDegree +'deg)',
});

答案 1 :(得分：0)

将rotateZ（）中的所有负度数值替换为正值。然后第一次点击将顺时针旋转，因为正值顺时针旋转而负值逆时针旋转。

通过添加360°可以将负度转换为正度，例如-77°：

-77° + 360° = 283°

因此，您将获得以下代码：

#info-heart:checked ~ #menu-items, #menu-items .top .ss-home { 
    -webkit-transform: rotateZ(283deg); 
    -moz-transform: rotateZ(283deg); 
    -ms-transform: rotateZ(283deg); 
    -o-transform: rotateZ(283deg); 
    transform: rotateZ(283deg); 
     -webkit-transition: -webkit-transform 1s ease-in;
     transition: 1s ease-in;
}

第二次点击的旋转取决于第一个和第二个选定项目的度数值。如果第二度高于第一度，则旋转将是顺时针。否则它将转向另一个方向。对于最后一种情况，我没有看到CSS中的解决方案顺时针旋转。

相关问题
最新问题