Transform background of transparent text?

Question

Ok, so I have a big heading on a page that has an image as the background of the text:

.big-heading {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: url('https://images.pexels.com/photos/169789/pexels-photo-169789.jpeg?dl&fit=crop&w=640&h=426');
  -webkit-background-size: cover;
  background-size: cover;
  font-size: 100px;
}

<h1 class="big-heading">
  I'm<br>
  huge text<br>
  example<br>
  example
</h1>

However, I want to use the ScrollMagic jQuery plugin to rotate the background of the text as you scroll down the page. I know how to use ScrollMagic, I just don't know how to transform the background of transparent text in CSS.

Any help would be appreciated.

Found these pages, maybe they will help some: http://stackoverflow.com/questions/32291913/svg-rotate-image-fill-on-hover ... http://stackoverflow.com/questions/22503382/svg-image-element-rotation ... http://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox — Asons, Mar 24 '17 at 19:17

score 0 · Answer 1 · answered Mar 24 '17 at 16:37

0

As far I know that isn't possible, maybe the best you can do is animate the background-position

.big-heading {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: url('https://images.pexels.com/photos/169789/pexels-photo-169789.jpeg?dl&fit=crop&w=640&h=426');
  -webkit-background-size: cover;
  background-size: cover;
  font-size: 100px;
  transition:all .8s ease-in;
}
.big-heading:hover {
  background-position:600px 300px;
}

<h1 class="big-heading">
  I'm<br>
  huge text<br>
  example<br>
  example
</h1>

answered Mar 24 '17 at 16:37

DaniP

37,813
8
65
74

Thanks for the answer, but it's really a rotation I'm looking for, if it's even possible – Sean Whelan Mar 24 '17 at 16:44
@LGSon maybe that has more possibilities as approach, but I don't know about SVG XD ... Waiting to see if you can :) – DaniP Mar 24 '17 at 16:45
@SeanWhelan yep the problem is the `background` itself can't be rotated mostly what you do is rotate the entire element. Hope someone can work with the SVG – DaniP Mar 24 '17 at 16:46
Well @SeanWhelan maybe SVG could be the way to go but requires a lot knowledge, check this on chrome works a little http://codepen.io/anon/pen/ZeRmeQ ... But still don't know how the point of rotation works – DaniP Mar 24 '17 at 17:20
Had a look ... quickly decided I don't know that much either :) ... found these pages though: http://stackoverflow.com/questions/32291913/svg-rotate-image-fill-on-hover ... http://stackoverflow.com/questions/22503382/svg-image-element-rotation ... http://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox – Asons Mar 24 '17 at 19:17

score 0 · Answer 2 · answered Mar 25 '17 at 00:49

You cannot rotate a background-image. To clip an image inside a text you can use both clip-path or pattern. With clip-path the object masked is the image so you won't be able to rotate it without rotating the text too. I suggest you to use a pattern and fill the text with the image like so:

<svg>
  <defs>
    <pattern id="clipping">
      <image xlink:href="IMAGE URL" />
    </pattern>
  </defs>

  <text fill="url(#clipping)">
    <tspan x="0" dy="10">Text</tspan>
    <tspan x="0" dy="10">filled</tspan>
    <tspan x="0" dy="10">with</tspan>
    <tspan x="0" dy="10">image</tspan>
  </text>
</svg>

And then you only have to rotate the patterns' image.

Codepen

Transform background of transparent text?

2 Answers2