CSS3 Image Transforms.

Richard (chuggerguy)July 2, 2013

<img width="550px" src="http://chuggerguy.com/pub/forumphotos/images/8start.png"; style="transform: rotate(30deg);-ms-transform: rotate(30deg);-webkit-transform: rotate(30deg);margin:140px 50px 140px 50px;border: 5px solid black;" />

This post was edited by chuggerguy on Fri, Jul 5, 13 at 13:47

Thank you for reporting this comment. Undo
Richard (chuggerguy)

This post is of the same image that I posted above but not rotated from within this post. I used the simplest tag.

<img src="http://chuggerguy.com/pub/forumphotos/images/8start.png";>

In the next post I'll attempt to rotate the image in this post using CSS. I suspect I can easily rotate the image but will need the addition of a margin to avoid overlapping this text...

and this text.

This post was edited by chuggerguy on Fri, Jul 5, 13 at 14:05

    Bookmark   July 2, 2013 at 6:44PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Edit: Yeah, rotating without making room for the rotation causes overlap. Just have to make sure to use "margin" I suppose.

Edit2: Adding a green background makes it apparent that the image also rotates out of bounds on the left and right margins too.

This post was edited by chuggerguy on Sat, Nov 2, 13 at 3:14

    Bookmark   July 2, 2013 at 6:53PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

This post was edited by chuggerguy on Sun, Aug 11, 13 at 11:33

    Bookmark   July 2, 2013 at 9:17PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Testing support in the browsers I have available...

IE8 - no rotation. Doesn't support CSS3 so as expected I suppose.

Chromium 27 - both ways work.

Firefox - both ways work.

IE10 - both ways work.

Opera 12 - both ways work.

Epiphany 3.4.1 - both ways work.

Edit: Having newline characters, whether intentional or by accident, within the "inline" CSS seems to break it in Chromium and Epiphany but not Firefox, Opera or IE.

This post was edited by chuggerguy on Fri, Jul 5, 13 at 14:10

    Bookmark   July 3, 2013 at 3:44AM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Post curly bracket as image?

<img src="http://www.chuggerguy.com/messages/imagetext.php?text=lcub">

produces:

and...

<img src="http://www.chuggerguy.com/messages/imagetext.php?text=rcub">

produces:

This post was edited by chuggerguy on Tue, Jul 23, 13 at 22:55

    Bookmark   July 23, 2013 at 8:56PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

and the current version of my undocumented mess of an image uploader:

It does accept multiple images though, creates thumbnails if needed, and hopefully rotates if needed.

This post was edited by chuggerguy on Sat, Aug 3, 13 at 21:20

    Bookmark   July 23, 2013 at 10:04PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

A not very descriptive gif of my multi-image uploader in action:

BigÃÂ ÃÂ Small

This post was edited by chuggerguy on Fri, Aug 23, 13 at 11:36

    Bookmark   August 9, 2013 at 10:57AM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Can you read upside down?

How about upside up?

This post was edited by chuggerguy on Fri, Aug 23, 13 at 12:05

    Bookmark   August 10, 2013 at 11:51AM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

deleted

This post was edited by chuggerguy on Tue, Aug 27, 13 at 0:27

    Bookmark   August 23, 2013 at 4:54PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Change Pic

This post was edited by chuggerguy on Fri, Aug 23, 13 at 23:48

    Bookmark   August 23, 2013 at 4:57PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Maybe something closer to a legitimate use...

Banana ÃÂ ÃÂ ÃÂ GinsengÃÂ ÃÂ ÃÂ Goldenseal

This post was edited by chuggerguy on Sat, Aug 24, 13 at 1:12

    Bookmark   August 23, 2013 at 11:16PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

That last post was done like this:

<center>
<div style="width:550px; height:400px; padding:3px 3px 0px 3px; border:10px black solid;"><img id="myimg3" style="border: 10px #36251D solid; width: 530px; height: 377px;" src="http://chuggerguy.com/pub/forumphotos/images/IMG_6842_thumb.jpg"></div>

<a href="javascript:document.getElementById('myimg3').src='http://chuggerguy.com/pub/forumphotos/images/IMG_6842_thumb.jpg';void(0);"> Banana </a> &nbsp;&nbsp;&nbsp;<a href="javascript:document.getElementById('myimg3').src='http://chuggerguy.com/pub/forumphotos/images/IMG_0050_thumb.jpg';void(0);"> Ginseng</a> &nbsp;&nbsp;&nbsp;<a href="javascript:document.getElementById('myimg3').src='http://chuggerguy.com/pub/forumphotos/images/IMG_0054_thumb.jpg';void(0);"> Goldenseal</a> </center>

This post was edited by chuggerguy on Sat, Aug 24, 13 at 1:26

    Bookmark   August 23, 2013 at 11:20PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

So, to do that for real...

  • Make it handle both landscape and portrait.
    • Set a max-height and also a max-width?
    • Do away with the frame?
  • Make it easier to use.
    • Incorporate it into an upload script?
    • Use a form for already hosted images?
      • Input fields to paste in the URLs.
      • Corresponding input fields for button labels(names?)
      • How about descriptions? Pop-ups, hints, above or below?
  • Links to "full sized/quality" images?

1 is a necessity.

2a, truthfully, for me, my present knowledge, my present motivation... too much work... this is just for fun. :)

2b sounds like it could be simple enough, easy enough, and maybe even fun.

3, same as 2b.

The catch, what extremely limited knowledge I have of JavaScript is... what I can Google that's understandable enough for me to use. And of course, the big catch, the one that makes this worth doing, overcoming the limitation of "This is not my server", accept the limitations, and work with/around them, hence we won't even mention jquery... yet anyway. :)

This post was edited by chuggerguy on Mon, Oct 21, 13 at 4:47

    Bookmark   August 23, 2013 at 11:29PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)


ÃÂ Square ÃÂ ÃÂ ÃÂ Landscape ÃÂ ÃÂ ÃÂ Portrait

Proportions roughly handled, good enough for now.

I don't know how to use JavaScript to change not just the image, but the link that goes along with the image.

This post was edited by chuggerguy on Sat, Aug 24, 13 at 12:28

    Bookmark   August 24, 2013 at 12:26PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)


Square Landscape Portrait

Working on changing the link. Hovering seems to indicate the link is being changed but... clicking takes me to the wrong image. Something seems almost dangerous about that, that a person could hover a link, read the target in the status area, decide it's safe, and... after clicking it, wind up somewhere completely different? Maybe I'm seeing it wrong.

Edit: Right-clicking and selecting "Open Link" opens to the correct image. Center-clicking to open in a new tab opens to the correct image. Left-clicking opens to the wrong image. Gotta be something really simple.

Edit: Almost one year later and bored so tried this again. The links are changing fine... no idea why. Firefox bug fixed? Whatever.

This post was edited by chuggerguy on Mon, Jul 7, 14 at 19:45

    Bookmark   August 24, 2013 at 4:37PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Tag Result b Sample text strong Sample text i Sample text em Sample text mark Sample text

This post was edited by chuggerguy on Sun, Aug 25, 13 at 18:31

    Bookmark   August 25, 2013 at 4:53PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Three lines of an error handling document.

I realize it wouldn't really happen but I think it would be funny if someone scanned for HNAP, setup.php, or whatever, got directed right back to their own machine where they'd just happen to have it, and hack their own machine. Well, I suppose not, but one can dream can't they?

This post was edited by chuggerguy on Sat, Sep 14, 13 at 2:06

    Bookmark   August 25, 2013 at 11:32PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Square Landscape Portrait

This post was edited by chuggerguy on Sun, Aug 25, 13 at 23:40

    Bookmark   August 25, 2013 at 11:35PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

Change Pic

This post was edited by chuggerguy on Mon, Aug 26, 13 at 16:40

    Bookmark   August 26, 2013 at 4:39PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)
    Bookmark   August 26, 2013 at 8:20PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

LargeSmallChange

This post was edited by chuggerguy on Tue, Aug 27, 13 at 18:17

    Bookmark   August 26, 2013 at 10:11PM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

LargeSmallChange

This post was edited by chuggerguy on Tue, Aug 27, 13 at 0:42

    Bookmark   August 27, 2013 at 12:26AM
Thank you for reporting this comment. Undo
Richard (chuggerguy)

<a href="javascript:void(document.getElementById('myimg1200').src = 'http://chuggerguy.com/pub/rimages/?ver='+Math.random());"><img id="myimg1200" style="width:550px; height:400px; border:black solid 5px;" src="http://chuggerguy.com/pub/rimages/";></a>

This post was edited by chuggerguy on Mon, Sep 16, 13 at 2:52

    Bookmark   August 27, 2013 at 12:47AM
Sign Up to comment
More Discussions
work-at-home websites...are they all scams?
Are there any legitimate work-at-home websites that...
donnas_gw
HTML link test
Does HTML work?
PatchyJack
The Academic Advantage - Wasantha Weerasekera wants a domain like
Hello, I am Wasantha Weerasekera. I have a query regarding...
wasanthaweerasekera
GardenWeb needs your feedback!
Hi everyone, As you may have noticed, we've been sprucing...
gwannouncements
Marble Countertop Help!!
Hi, I have recently decided to purchase a spec home...
monikaxp
People viewed this after searching for:
© 2015 Houzz Inc. Houzz® The new way to design your home™