Return to the Web Authoring Forum | Post a Follow-Up

 o
CSS3 Image Transforms.

Posted by chuggerguy (My Page) on
Tue, Jul 2, 13 at 18:17

<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


Follow-Up Postings:

 o
RE: CSS3 Image Transforms.

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


 o
Trying to rotate the above image 30 degs clockwise.


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


 o
RE: CSS3 Image Transforms.


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


 o
RE: CSS3 Image Transforms.

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


 o
RE: CSS3 Image Transforms.

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


 o
RE: CSS3 Image Transforms.

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


 o
RE: CSS3 Image Transforms.

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


 o
Quote box revisited?

Can you read upside down?

How about upside up?

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


 o
Refreshable image?

deleted

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


 o
Refreshable image?

Change Pic

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


 o
RE: CSS3 Image Transforms.

Maybe something closer to a legitimate use...

Banana     Ginseng    Goldenseal

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


 o
RE: CSS3 Image Transforms.

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


 o
RE: CSS3 Image Transforms.

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


 o
RE: CSS3 Image Transforms.



  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


 o
RE: CSS3 Image Transforms.

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.

This post was edited by chuggerguy on Sat, Aug 24, 13 at 17:02


 o
RE: CSS3 Image Transforms.

TagResult
bSample text
strongSample text
iSample text
emSample text
markSample text

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


 o
RE: CSS3 Image Transforms.

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


 o
RE: CSS3 Image Transforms.

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


 o
RE: CSS3 Image Transforms.

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


 o
Click the pic to change.


 o
Buttons to increase/decrease size?

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


 o
RE: CSS3 Image Transforms.

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


 o
RE: CSS3 Image Transforms.

<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


 o Post a Follow-Up

Please Note: Only registered members are able to post messages to this forum.

    If you are a member, please log in.

    If you aren't yet a member, join now!


Return to the Web Authoring Forum

Information about Posting

  • You must be logged in to post a message. Once you are logged in, a posting window will appear at the bottom of the messages. If you are not a member, please register for an account.
  • Posting is a two-step process. Once you have composed your message, you will be taken to the preview page. You will then have a chance to review your post, make changes and upload photos.
  • After posting your message, you may need to refresh the forum page in order to see it.
  • Before posting copyrighted material, please read about Copyright and Fair Use.
  • We have a strict no-advertising policy!
  • If you would like to practice posting or uploading photos, please visit our Test forum.
  • If you need assistance, please Contact Us and we will be happy to help.


Learn more about in-text links on this page here