用Java旋转Div

Question

我需要能够按下一个按钮并通过一个图标旋转菜单。我知道它必须对翻译有所帮助，但我不确定该如何做。扩展工作正常，无需更改。任何建议将不胜感激，css / html不是我的专长。

var i = 0;

function expand() {
  if (i == 0) {
    document.getElementById("menu").style.transform = 'scale(3)';
    i = 1;
  } else {
    document.getElementById("menu").style.transform = 'scale(0)';
    i = 0;
  }

}
/**
var container = document.getElementById("menu"),
    offset = container.getBoundingClientRect(),
    elements = container.querySelectorAll("li"),
    radius = container.offsetWidth / 2,
    angle = (360 / elements.length) * Math.PI / 180,
    sangle = 40,
    eangle = 40,
    increment = 40;

function moveElements() {
    var x = 0,
        y = 0,
        itemAngle = 0,
        transform = "";

    Array.prototype.forEach.call(elements, function(item, index) {
        itemAngle = index * angle + increment;
        x = radius + Math.cos(itemAngle) * radius;
        y = radius + Math.sin(itemAngle) * radius;
        transform = "translate(" + x + "px, " + y + "px)"
    });

}    
**/

body {
  padding: 0;
  margin: 0;
  background-color: purple;
  overflow: hidden;
}

.toggle {
  background-color: #5990dc;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  text-align: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.fa-plus {
  font-size: 60px;
  color: white;
  position: absolute;
  top: 24px;
  left: 26px;
}

.menu {
  background-color: #ffffff;
  height: 100px;
  width: 100px;
  transform: scale(3);
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transition: 1s;
  transform: rotate(0);
  transform: translate(-50%, -50%);
}

.menuitem {
  transform: rotate(0);
}

li {
  display: inline-block;
  position: absolute;
  font-size: 15px;
  color: #bbbbbb;
}

li:nth-child(1) {
  top: 6px;
  left: 45px;
}

li:nth-child(2) {
  top: 24px;
  left: 77px;
}

li:nth-child(3) {
  top: 58px;
  left: 76px;
}

li:nth-child(4) {
  top: 78px;
  left: 42px;
}

li:nth-child(5) {
  top: 58px;
  left: 10px;
}

li:nth-child(6) {
  top: 23px;
  left: 12px;
}

li:hover {
  color: #5990dc;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="toggle" id="toggle" onclick="expand()">
  <i class="fa fa-fplus" aria-hidden="true"></i>
</div>

<div class="menu" id="menu">
  <ul>
    <li><i class="fa fa-microphone" aria-hidden="true" onclick="moveElements()"></i></li>
    <li><i class="fa fa-comments" aria-hidden="true"></i></li>
    <li><i class="fa fa-user" aria-hidden="true"></i></li>
    <li><i class="fa fa-envelope" aria-hidden="true"></i></li>
    <li><i class="fa fa-video-camera" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i>
    </li>
  </ul>
</div>

<div class="but" id="but"></div>

Answer 1

我不确定100％是否确定您想要的结果，但是我已经像这样修改了您的代码：

.menu{
    background-color: #ffffff;
    height:100px;
    width:100px;
    border-radius:50%;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-1;
    transition: transform .8s ease-in-out;
    transform: rotate(180deg);
}

.menu-open {
    transform: scale(3) rotate(0deg);
}

并且还更改了您的js：

if(i==0){
    //document.getElementById("menu").style.transform='scale(3)';
    document.getElementById("menu").classList.add('menu-open');
    i=1;
}else{
    //document.getElementById("menu").style.transform='scale(0)';
    document.getElementById("menu").classList.remove('menu-open');
    i=0;
}

您可以看到结果here。将其旋转180°会增加菜单的大小。

Answer 2

您必须跟踪每个值（旋转和缩放），以免覆盖您未修改的值。

var i = 0;
let currentScale = 1, rotationStep = 360/$('#menu ul li').length,
currentRotate = 0;

function expand() {
  if (i == 0) {
     currentScale = 3;
    document.getElementById("menu").style.transform = `scale(${currentScale}) rotate(${currentRotate}deg)`;
    i = 1;
  } else {
    currentScale = 0;
    document.getElementById("menu").style.transform = `scale(${currentScale}) rotate(${currentRotate}deg)`;
    i = 0;
  }
}

$('#rotate').click(()=>{
  currentRotate += rotationStep;
  $('#menu').css({'transform': `scale(${currentScale}) rotate(${currentRotate}deg)`});
  
});
/**
var container = document.getElementById("menu"),
    offset = container.getBoundingClientRect(),
    elements = container.querySelectorAll("li"),
    radius = container.offsetWidth / 2,
    angle = (360 / elements.length) * Math.PI / 180,
    sangle = 40,
    eangle = 40,
    increment = 40;

function moveElements() {
    var x = 0,
        y = 0,
        itemAngle = 0,
        transform = "";

    Array.prototype.forEach.call(elements, function(item, index) {
        itemAngle = index * angle + increment;
        x = radius + Math.cos(itemAngle) * radius;
        y = radius + Math.sin(itemAngle) * radius;
        transform = "translate(" + x + "px, " + y + "px)"
    });

}    
**/

body {
  padding: 0;
  margin: 0;
  background-color: purple;
  overflow: hidden;
}

.toggle {
  background-color: #5990dc;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  text-align: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.fa-plus {
  font-size: 60px;
  color: white;
  position: absolute;
  top: 24px;
  left: 26px;
}

.menu {
  background-color: #ffffff;
  height: 100px;
  width: 100px;
  transform: scale(3);
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transition: 1s;
  transform: rotate(0);
  transform: translate(-50%, -50%);
  transform-origin:-50%, -50%;
}

.menuitem {
  transform: rotate(0);
}

li {
  display: inline-block;
  position: absolute;
  font-size: 15px;
  color: #bbbbbb;
}

li:nth-child(1) {
  top: 6px;
  left: 45px;
}

li:nth-child(2) {
  top: 24px;
  left: 77px;
}

li:nth-child(3) {
  top: 58px;
  left: 76px;
}

li:nth-child(4) {
  top: 78px;
  left: 42px;
}

li:nth-child(5) {
  top: 58px;
  left: 10px;
}

li:nth-child(6) {
  top: 23px;
  left: 12px;
}

li:hover {
  color: #5990dc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="toggle" id="toggle" onclick="expand()">
  <i class="fa fa-fplus" aria-hidden="true"></i>
</div>

<div class="menu" id="menu">
  <ul>
    <li><i class="fa fa-microphone" aria-hidden="true" onclick="moveElements()"></i></li>
    <li><i class="fa fa-comments" aria-hidden="true"></i></li>
    <li><i class="fa fa-user" aria-hidden="true"></i></li>
    <li><i class="fa fa-envelope" aria-hidden="true"></i></li>
    <li><i class="fa fa-video-camera" aria-hidden="true"></i></li>
    <li><i class="fa fa-bell" aria-hidden="true"></i>
    </li>
  </ul>
</div>

<button id='rotate' >Rotate</button>

<div class="but" id="but"></div>