我正在使用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>
答案 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中的解决方案顺时针旋转。