clipPath отрезан контейнером - PullRequest
Новая
       69

clipPath отрезан контейнером

2 голосов
/ 01 мая 2020

Так что я довольно близок к желаемому эффекту, но проблема в том, что clipPath, который я использую во время вращения, обрезается контейнером. Есть ли способ исправить это? Я попытался возиться с viewBox и другими свойствами, но безрезультатно. Я не очень хорошо разбираюсь в использовании clipPath. Будет ли лучше использовать CSS clip-path и просто вращать псевдоэлемент в противоположном направлении? 

.red {
  background-image: url('https://cdn.mos.cms.futurecdn.net/u8wSHMmMMXzZuAFBCmcsCK-650-80.jpg');
  background-size: 90%;
  height: 100vh;
  width: 700px;
  clip-path: url(#clipPolygon);
  position: relative;
  z-index: 2;
  margin-top: 120px;
  margin-left: 250px;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

svg {
}

defs {
  transition: all 5s;
  transform: rotate(360deg);
}
<div class="red">
  <svg>
   <defs>
    <clipPath id="clipPolygon">
      <polygon points="200 250,400 100,300 50,0 0">
        <animateTransform attributeName="transform" begin="0s" dur="2.5s" type="rotate" from="360 160 160" to="0 160 160" repeatCount="indefinite"/>
      </polygon>
    </clipPath>
   </defs>
  </svg>
</div>

<div class="bg">
  <img src="https://www.mcgilvraydesign.com/img/bgdemo3.jpg" alt="">
</div>

1 Ответ

1 голос
/ 01 мая 2020

Вы можете использовать свой многоугольник в качестве маски CSS, тогда вы можете легко справиться с вращением, используя два элемента, вращающихся в противоположном направлении 

.red {
  background:url(https://www.mcgilvraydesign.com/img/bgdemo3.jpg) center/contain no-repeat;
  min-height:350px;
  height: 100vh;
  overflow:hidden;
}
.red > div {
  /* control the mask here */
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0 400 300"><polygon points="200 250,400 100,300 50,0 0"/></svg>') 
               center/ /* position */
               300px 200px /* size */
               no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0 400 300"><polygon points="200 250,400 100,300 50,0 0"/></svg>') 
               center/
               300px 200px 
               no-repeat;
  height:100%;
  position:relative;
  animation:rotate 2s linear infinite;
}
.red > div::before {
  content:"";
  position:absolute;
  /*big values here to avoid the cut effet*/
  top:-100%;
  left:-100%;
  right:-100%;
  bottom:-100%;
  /* */
  /* Control the skull here */
  background: url('https://cdn.mos.cms.futurecdn.net/u8wSHMmMMXzZuAFBCmcsCK-650-80.jpg') 
     50% 45%/ /* position */
     22% auto /* size*/
     no-repeat,
     #fff;
  animation:inherit;
  animation-direction:reverse;
}

@keyframes rotate {
  to {
    transform:rotate(-360deg);
  }
}

body {
 margin:0;
}
<div class="red">
 <div></div>
</div>
...