Question

最近，我决定尝试并了解CSS变换。现在，我决定尝试使用SVG和一些变换来制作一个普通的移动按钮。

我要做的是让移动按钮旋转90度，并在元素的正中心处使用变换原点。

这是我的代码：

.mobileNav {
    display: block;
    transition: .5s;
  }
  
   .mobileNav:hover {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
     /*This is where the problem lies. How do I set the origin to the center of .mobileNav?? */
  }
 
ul {
    
    float: right;
    margin: 15px 50px 0px 0px;
  }
  
  li {
    display: inline-block;
    
    
    transition: .5s;
  }

<ul class="mobileNav">
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				</ul>

目标：将转换原点设置为.mobileNav的中心。

问题：我无法实现此目标。

浏览器：我的浏览器 Firefox 44.0.2

Answer 1

padding有需要重置的defaut margin或li。

svg和inline-block可以重置为vertical-aign。

让我们绘制一个边框进行调试，看看情况如何。

line-height + height将有助于定义ul到body { margin-top:50px;/* snippet wants this */ } .mobileNav { display: block; transition: .5s; border: solid; padding: 0 } .mobileNav:hover { transform: rotate(90deg); } ul { float: right; margin: 15px 50px 0px 0px; line-height: 1em; } li, svg { display: inline-block; vertical-align: middle; transition: .5s; }，并将子项设置在垂直中间。

<ul class="mobileNav">
  <li>
    <svg x="0px" y="0px" width="10" height="20">
      <circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
    </svg>
  </li>
  <li>
    <svg x="0px" y="0px" width="10" height="20">
      <circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
    </svg>
  </li>
  <li>
    <svg x="0px" y="0px" width="10" height="20">
      <circle cx="5" cy="10" r="3" stroke-width="4" fill="#333" />Sorry, your browser does not support inline SVG.
    </svg>
  </li>
</ul>

{{1}}

Answer 2

您的问题是默认填充。为了增加效果，您还可以将SVG和li设置为不显示内联或内联块。然后将它们浮起，使其垂直对齐。这应该让它不那么笨拙。

body {padding: 3em;}
.mobileNav {
    display: block;
    transition: .5s;
    padding: 0;
  }
  
   .mobileNav:hover {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
     /*This is where the problem lies. How do I set the origin to the center of .mobileNav?? */
  }
 
ul {
    
    float: right;
    margin: 15px 50px 0px 0px;
  }
  
  li {
    display: inline-block;
    
    
    transition: .5s;
  }

 .mobileNav svg, .mobileNav li {
      display:block;
      float:left;
 }

<ul class="mobileNav">
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				<li>
					<svg x="0px" y="0px" width="10" height="20">
   					<circle cx="5" cy="10" r="3"  stroke-width="4" fill="#333" />
   					Sorry, your browser does not support inline SVG.
					</svg> 
				</li>
				</ul>

如何在嵌套的SVG元素上设置旋转点

2 个答案: