How can I rotate a background image (custom bullet) 90degrees

Question

What I am trying to do is make an accordion of sorts with a triangular bullet which rotates to point down when the <dd> slides down.

Just to be clear, I want the bullet to animate, not just flip between two images.

I know I can do this with css3 and a little class swapping if the bullets were their own html elements (<img>'s or whatever), but in the spirit of keeping content/style seperation I would prefer to leave the background image.

Another approach would probably be injecting some <img>'s into the dom with javascript, but I would rather an more elegant solution if one exists.

It would be even cooler if it could be done somehow with those cool css triangles I recently learned about.

html

<dl id="accordian">
    <dt><a href="#" class="active"> Link to slide down dd </a></dt>
        <dd> Text to drop down </dd>
    <dt><a href="#"> Link to slide down dd </a></dt>
        <dd> Text to drop down </dd>
    <dt><a href="#"> Link to slide down dd </a></dt>
         <dd> Text to drop down </dd>
</dl>

css

#accordian dt {
  background: url(../images/triangleBullet.png) left center no-repeat;    
  padding-left: 20px;
}

jquery

$(document).ready(function() {
  //Thermal Coatings page - Accordian
  $('#accordian dd').hide();
  $('#accordian a.active').parent().next('dd').show();
  $('#accordian a').click(function(){
    $('#accordian a').removeClass('active');
    $(this).addClass('active');
    $('#accordian dd').slideUp();
    $(this).parent().next('dd').slideDown();
  });
});

Answer 1

Super modern browsers allowed? Say no more... check out this JSFiddle.

Someone else already noted the technique -- here is a refined, cross-browser solution using your original HTML and JavaScript and only adding some CSS.

It makes clever use of the ::before pseudo-element to place a piece of content to the left of the <dt> label. Furthermore, the "pointers" are generated with linear gradients (black 0%, black 50%, transparent 50%, transparent 100%) and the correct transform rotation. Since they are half transparent, you should be able to get them to sit on top of any type background style for the <dt> (background-color:green in this example).

The ::before element also has a transition applied to it for the open/close animation. As already mentioned the animation is not working in all browsers -- these browsers will adjust the rotation instantly.

Want to get super-duper advanced? You could also make the pointers with an image-mask or you could even base64 encode a transparent pointer png image that will only sit in your CSS file, like so:

-webkit-mask: 0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=') no-repeat;

That could give you more flexibility in the exact style of your pointer (since it is an image) without needing to actually host an image file.

Answer 2

I don't think background animation is possible in terms of rotating and all, you can however play around with css3 transitions and the background-position property. but this would only reposition your arrow or bulletpoint image.

rotating is something you could do when like you say, it is it's own element.

example:

<div class="element">I'm a block of text</div>

css:

.element{
    background:url('http://lorempixum.com/50/200') no-repeat;
    background-position:-40px;
    border:1px solid black;
    display:block;
    padding-left: 60px;
    height:200px;
    width:240px;
    -webkit-transition:background-position .5s ease;
}

.element:hover{
    background-position:-0px;
}

Answer 3

These folks lack imagination, don't let 'em bring you down! In CSS3 you can use the :before or :after pseudoelements to add decorative content like this without adding extra markup.

Using your code I was able to come up with this fiddle.

For whatever reason in Chrome and Safari the easing doesn't seem to happen, but it works in Firefox. But I'm sure with a little, er, fiddling you can fix it. This ought to get you started at least.

Edit: Works with a background image too, but same easing issue.

Edit 2: FYI this is a known issue in WebKit. You could fake it, though, by generating CSS to take care of the rotation. But if you're going that far, you could just use JS to put real elements into the DOM instead of pseudoelements.

Answer 4

It looks like this is not possible yet apparently. If anyone is interested, I made one of those css triangles rotate 90 degrees. I may use a variation of this concept... I'll put up the code when its all sorted out.

JSfiddle