时间戳

首页 > 解决方案 > 无法从 Z 轴翻转 SVG 圆

html - 无法从 Z 轴翻转 SVG 圆

问题描述

我试图从 z 轴翻转红色圆圈，但它仅从 y 轴翻转。在下面的代码中，我正在旋转红色圆圈。

.processicon:hover .flip-circle, .processicon:hover .fil2{
		transform-origin: 56% 56%;
		transform: rotate3d(0, 150, 0, 180deg);
	}

	.flip-circle, .fil2{
		transition: 0.4s linear;
	}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg class="processicon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="150px"  version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 1284 1309"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil1 {fill:#BF1E2E}
    .fil2 {fill:white}
    .fil0 {fill:url(#id0)}
   ]]>
  </style>
  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="194.719" y1="514.919" x2="1089.02" y2="793.777">
   <stop offset="0" style="stop-opacity:1; stop-color:#2056A6"/>
   <stop offset="1" style="stop-opacity:1; stop-color:#22356A"/>
  </linearGradient>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g id="_681339696">
   <path class="fil0" d="M642 0c54,0 106,7 156,19 -26,-4 -53,-6 -80,-6 -162,0 -306,74 -403,189 -114,147 -169,320 -90,552 78,200 269,340 493,340 292,0 530,-242 530,-540 0,-77 -16,-150 -44,-216 51,94 80,202 80,316 0,362 -288,655 -642,655 -280,0 -518,-183 -606,-437 -7,-22 -14,-44 -19,-66l0 0 0 -1c-44,-191 -2,-395 118,-552 10,-14 21,-27 32,-39l1 0 0 0c117,-132 286,-214 474,-214z"/>
   <ellipse class="fil1 flip-circle" cx="715" cy="556" rx="504" ry="514"/>
   <g>
    <g>
     <path class="fil2" d="M1040 809l-5 -92c-3,-41 -30,-77 -69,-91l-20 -7 -7 -2 -107 -38c-1,-1 -1,-1 -2,-1 0,0 0,0 0,0 -1,0 -1,0 -1,0 0,0 0,0 -1,0 0,0 0,0 0,0 0,0 -1,0 -1,0 0,0 0,0 0,0 -1,0 -1,0 -1,0 -1,0 -2,0 -3,0 0,0 0,0 0,0 -2,0 -5,1 -7,3 0,0 0,0 -1,0 0,0 0,0 0,1 0,0 -1,0 -1,0l-34 -10 0 -26c32,-21 57,-60 59,-96l0 0c15,0 26,-12 26,-26l0 -24c0,-3 -1,-6 -2,-9 7,-3 11,-10 11,-17l0 -14c0,-9 -7,-18 -16,-19l0 -4c0,-1 0,-2 0,-3 0,-12 -2,-23 -6,-34 -1,-5 -7,-8 -12,-7 -5,2 -8,7 -6,12 3,10 4,19 5,29 0,1 0,2 0,3l0 13c0,5 4,10 9,10l6 0c0,0 1,0 1,0l0 14c0,0 -1,0 -1,0l-279 0c0,0 0,0 0,0l0 -14c0,0 0,0 0,0l6 0c6,0 10,-5 10,-10l0 -13c0,-1 0,-2 0,-3 1,-50 38,-93 86,-101l0 35 0 0c0,8 4,16 9,22 0,0 0,0 1,0 0,0 0,0 0,1 6,5 13,9 22,9l0 0 11 0 0 0c9,0 17,-4 23,-9 0,-1 0,-1 0,-1 0,0 0,0 0,0 6,-6 9,-14 9,-22l0 0 0 -35c27,4 50,19 66,41 3,4 9,5 14,2 4,-3 5,-9 2,-13 -21,-28 -51,-46 -85,-50 -5,-11 -16,-18 -29,-18l-11 0c-12,0 -23,7 -28,18 -29,3 -55,16 -75,37 -21,23 -33,52 -34,84 0,1 0,2 0,3l0 4c-9,1 -16,10 -16,19l0 14c0,7 4,14 10,17 -1,3 -1,6 -1,9l0 24c0,14 11,26 25,26l1 0c1,36 26,75 58,97l0 25 -33 10c-1,0 -1,0 -1,0 0,-1 -1,-1 -1,-1 0,0 0,0 0,0 -3,-2 -5,-3 -8,-3 0,0 0,0 0,0 -1,0 -1,0 -2,0 -1,0 -1,0 -1,0 0,0 0,0 0,0 -1,0 -1,0 -1,0 0,0 -1,0 -1,0 0,0 0,0 0,0 -1,0 -1,0 -1,0 0,0 -1,0 -1,0 0,0 -1,0 -1,1l-93 32 -21 8 0 0 -20 7c-39,14 -66,50 -69,91l-1 11c0,6 4,10 9,10 5,1 10,-3 10,-8l1 -11c2,-34 24,-64 56,-75l8 -3 0 181 -59 0c-3,0 -6,-1 -8,-4 -2,-2 -3,-5 -3,-8l3 -42c0,-5 -4,-10 -9,-10 -5,0 -10,4 -10,9l-3 42c0,8 3,16 8,22 6,6 14,10 22,10l68 0 72 0 311 0 73 0 67 0c9,0 17,-4 22,-10 6,-6 9,-14 8,-22zm-201 -415l0 0c4,0 7,2 7,6l0 24c0,4 -3,6 -7,6l0 0 0 -36zm-143 -167c0,-1 0,-2 1,-3 0,0 0,0 0,0 1,-6 6,-10 12,-10l11 0c6,0 11,4 13,10 0,0 0,0 0,0 0,1 0,2 0,3l0 41c0,3 -1,6 -3,9 0,0 0,0 0,0 -1,0 -1,0 -1,0 -2,2 -5,4 -9,4l-11 0c-3,0 -6,-2 -9,-4 0,0 0,0 0,0 0,0 0,0 0,0 -2,-3 -4,-6 -4,-9l0 -41zm-105 203l-1 0c-3,0 -6,-2 -6,-6l0 -24c0,-4 3,-6 6,-6l1 0 0 36zm-41 392l-53 0 0 -187 34 -12 19 -7 0 206zm60 -376l0 -6 0 -46 210 0 0 46 0 0 0 6c0,33 -27,72 -58,89 0,0 0,0 0,0 -1,1 -2,1 -3,2 0,0 -1,0 -1,0 -2,1 -4,2 -6,3 0,0 -1,0 -1,0 -1,0 -2,1 -2,1 -1,0 -1,0 -1,0 -1,1 -3,1 -4,1l-1 0c-2,1 -4,2 -6,2 -9,2 -16,3 -23,3 -8,0 -16,-1 -29,-5 -1,0 -2,0 -3,-1 -1,0 -1,0 -1,0 -1,0 -2,0 -3,-1 0,0 0,0 0,0 -3,-1 -5,-2 -7,-3 0,0 0,0 0,0 -33,-16 -61,-57 -61,-91zm47 144c7,-2 11,-9 11,-16l0 -17c1,0 2,0 3,1 0,0 1,0 1,0 1,1 2,1 3,1 1,1 1,1 1,1 2,0 3,1 4,1 4,1 7,1 9,2 1,0 2,0 3,1 0,0 0,0 0,0 8,1 15,2 22,2 0,0 0,0 0,0 0,0 0,0 0,0 8,0 15,-1 24,-3 3,0 6,-1 10,-2l1 0c1,-1 3,-1 4,-1 0,-1 1,-1 1,-1 1,0 2,0 3,-1 0,0 1,0 1,0 1,-1 2,-1 3,-1l0 17c0,7 5,14 12,16l25 8c0,0 0,0 0,0 -1,1 -2,2 -4,3 0,0 0,0 0,1 -2,1 -3,2 -4,3 0,0 -1,0 -1,0 -1,1 -3,2 -4,3 0,0 0,0 -1,0 -1,1 -2,2 -4,3 0,0 0,0 0,0 -2,1 -3,2 -4,3 -1,0 -1,0 -1,0 -2,1 -3,1 -4,2 -1,0 -1,0 -1,1 -2,0 -3,1 -5,2 0,0 0,0 -1,0 -1,1 -2,1 -4,2 0,0 -1,0 -1,0 -1,1 -3,1 -4,2 -1,0 -1,0 -1,0 -2,0 -3,1 -5,1 0,0 0,0 0,0 -2,1 -4,1 -5,2 0,0 -1,0 -1,0 -1,0 -3,0 -5,1 0,0 0,0 -1,0 -1,0 -3,0 -4,1 -1,0 -1,0 -1,0 -2,0 -4,0 -5,0 -1,0 -1,0 -1,0 -2,1 -3,1 -5,1 0,0 -1,0 -1,0 -2,0 -3,0 -5,0 0,0 0,0 0,0 -2,0 -4,0 -6,0 0,0 0,0 0,0 -2,0 -4,0 -5,-1 -1,0 -1,0 -1,0 -2,0 -3,0 -5,0 0,0 -1,0 -1,0 -2,-1 -3,-1 -5,-1 0,0 0,0 -1,0 -1,-1 -3,-1 -5,-1 0,0 0,0 0,0 -4,-1 -7,-2 -10,-3 -1,0 -1,0 -1,0 -1,-1 -3,-1 -5,-2 0,0 0,0 0,0 -2,-1 -3,-1 -5,-2 0,0 0,0 -1,0 -1,-1 -3,-2 -4,-2 0,-1 -1,-1 -1,-1 -1,-1 -3,-1 -4,-2 -1,0 -1,0 -1,0 -3,-2 -6,-4 -9,-6 0,0 0,0 0,0 -2,-1 -3,-2 -5,-3 0,0 0,0 0,0 -2,-1 -3,-2 -4,-3 0,-1 -1,-1 -1,-1 -1,-1 -2,-2 -4,-3 0,0 0,0 0,0l26 -8zm-54 7l8 8c28,28 65,43 104,43 0,0 0,0 0,0 0,0 0,0 0,0 24,0 47,-6 68,-17 12,-6 23,-14 32,-23 0,0 0,0 0,0 1,-1 2,-1 2,-2 0,0 1,0 1,-1l0 0 8 -8 8 3 3 1 -12 12c-30,29 -69,45 -110,45 -42,0 -81,-16 -110,-45l-12 -12 10 -4zm258 225l-292 0 0 -213 4 -1 18 19c0,0 0,0 0,0 33,32 77,50 124,50 46,0 90,-18 123,-50 0,0 0,0 0,0l19 -19 4 1 0 213zm72 0l-53 0 0 -206 19 7 34 12 0 187zm85 -4c-2,3 -5,4 -8,4l-58 0 0 -181 7 3c32,11 54,41 57,75l5 91c1,3 0,6 -3,8z"/>
    </g>
   </g>
  </g>
 </g>
</svg>

任何帮助深表感谢。

标签： htmlcsssvg

解决方案

尝试像这样使用它：rotate3d(360, 360, 360, 1turn);并且只​​使用这些值，直到你得到你需要的结果，这在问题中不是很清楚。

或者您可以像这样应用多个转换：

transform: rotate3d(0, 150, 0, 180deg) rotate3d(150, 0, 0, 180deg);

此外，一些文档：https ://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d

推荐阅读