Skocz do zawartości

[css] obracanie sie elementu

HERO

Przez HERO
w HTML i CSS

 Udostępnij

Rekomendowane odpowiedzi

HERO Enthusiast

HERO

Opublikowano
Opublikowano

 

Hej, napisałem cos takiego i uzyskalem taki efekt

 

image.png.3abf29bf8ed4445989db8ab25cd9234d.png

chcialbym teraz obrocic zębatką powiedzmy o 60 stopni

uzywalem  

transform: rotate(60deg);
  transform-origin: center;

 

ale nie obraca sie pozostawjac w tym samym miejscu tylko "wedruje" po stronie, nie bardzo juz wiem jak to ugryzc?

kod ponizej

  

 <style>  
    .photo{
        background: url('https://st.depositphotos.com/1526816/1248/v/600/depositphotos_12482794-stock-illustration-tree-hollow.jpg');
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        top: 0;
        left: 0;
        z-index: 1;
        clip-path: url(#cog);
    }
    #path{
        transform: scale(4);
    }
    </style>
  </head>
  <body>
  <div class="photo"></div>
    <svg> 
        <defs>
          <clipPath id="cog">
            <path  id="path" d='M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774 c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815 C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607 c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205 C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501 C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763 c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733 s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128 c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735 c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77 c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85 C30.906,27.334,27.355,30.85,22.976,30.85z'></path>
          </clipPath>
        </defs>
      </svg>

 

Opiekuj.pl - Testy dla opiekunek do dzieci | Dentysta Mokotów który daje powody do uśmiechu | Systemy szklane - Oferujemy szeroki wybór elementów szklanych dostępnych w różnych rozmiarach

 

Odnośnik do komentarza
Udostępnij na innych stronach
HERO Enthusiast

HERO

Opublikowano
  • Autor
Opublikowano

Jak coś to udało mi się w ten sposób to rozwiązać 

  

    <style>  
    .photo{
        background: url('https://aviasolarbyunimot.eu/wp-content/uploads/2023/01/unimot_1.16.1-scaled.jpg');
        width: 380px;
        height: 380px;
        clip-path: url(#cog);
        background-repeat: no-repeat;
      background-size: cover;
    }
    #path{
        transform: scale(10);
    }
    #cog{
        transform-origin: center;
    }
    #bsv{
        width: 365px;
        height: 365px;
        position: absolute;
    }
    .photo + #bsv #cog {
    animation: rotate 10s linear infinite; 
  }
  
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
    </style>
      <div class="photo"></div>
      <svg id="bsv"> 
            <defs>
              <clipPath id="cog">
              
                <rect x="80.124001" y="34.360001" ns0:knockout="Off" transform="matrix(0.5,0.866,-0.866,0.5,92.4648,-67.7148)" fill="#444548" width="49.499001" height="23.715" id="rect3128"></rect>
             
                     <rect x="173.14301" ns0:knockout="Off" fill="#444548" width="23.716" height="49.498001" id="rect3130" y="0"></rect>
             
                     
                       <rect x="253.271" y="21.469" ns0:knockout="Off" transform="matrix(0.866,0.5001,-0.5001,0.866,58.6415,-126.3863)" fill="#444548" width="23.712999" height="49.499001" id="rect3132"></rect>
             
                     <rect y="173.14301" ns0:knockout="Off" fill="#444548" width="49.498001" height="23.715" id="rect3134" x="0"></rect>
             
                     
                       <rect x="311.92599" y="80.125" ns0:knockout="Off" transform="matrix(0.5001,0.866,-0.866,0.5001,252.6911,-227.9628)" fill="#444548" width="23.716" height="49.497002" id="rect3136"></rect>
             
                     <path ns0:knockout="Off" fill="#444548" d="m 185,64.452 c -65.089,0 -117.854,52.764 -117.854,117.853 0,65.088 52.766,117.854 117.854,117.854 65.089,0 117.855,-52.767 117.855,-117.854 C 302.855,117.216 250.089,64.452 185,64.452 Z m 0,190.794 c -40.283,0 -72.938,-32.656 -72.938,-72.94 0,-40.283 32.655,-72.939 72.938,-72.939 40.283,0 72.941,32.656 72.941,72.939 0,40.283 -32.658,72.94 -72.941,72.94 z" id="path3138"></path>
             
                     
                       <rect x="21.469999" y="93.015999" ns0:knockout="Off" transform="matrix(0.866,0.5,-0.5,0.866,58.6316,-9.0583)" fill="#444548" width="49.495998" height="23.715" id="rect3140"></rect>
             
                     
                       <rect x="299.035" y="253.27" ns0:knockout="Off" transform="matrix(-0.866,-0.5,0.5,-0.866,471.6265,656.6249)" fill="#444548" width="49.495998" height="23.715" id="rect3142"></rect>
             
                     
                       <rect x="34.361" y="240.379" ns0:knockout="Off" transform="matrix(-0.5,-0.866,0.866,-0.5,-160.271,437.7267)" fill="#444548" width="23.714001" height="49.495998" id="rect3144"></rect>
             
                     <rect x="320.50299" y="173.14301" ns0:knockout="Off" fill="#444548" width="49.495998" height="23.715" id="rect3146"></rect>
             
                     
                       <rect x="240.37801" y="311.92599" ns0:knockout="Off" transform="matrix(-0.5,-0.866,0.866,-0.5,117.278,715.2777)" fill="#444548" width="49.498001" height="23.714001" id="rect3148"></rect>
             
                     
                       <rect x="93.015999" y="299.03299" ns0:knockout="Off" transform="matrix(-0.866,-0.5001,0.5001,-0.866,33.7855,656.6194)" fill="#444548" width="23.716" height="49.499001" id="rect3150"></rect>
             
                     <rect x="173.14301" y="320.50299" ns0:knockout="Off" fill="#444548" width="23.716" height="49.495998" id="rect3152"></rect>


                </clipPath>
            </defs>
      </svg>

 

 

 

Opiekuj.pl - Testy dla opiekunek do dzieci | Dentysta Mokotów który daje powody do uśmiechu | Systemy szklane - Oferujemy szeroki wybór elementów szklanych dostępnych w różnych rozmiarach

 

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności