SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS Rotate

  1. #1
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Rotate

    Hi all,

    Can anyone help me on this issue?

    What I am trying to achieve is, rotate a div with an image inside (but not rotate the image - have the image stay positioned horizontally).

    Here is a link to a test page - LINK

    What I have at the moment is the div rotating and the image rotating with it (but I'm not liking that too much - as stated above, I would prefer to have the image stay positioned horzontally).

    I know the choice of image isn't the best since it's round, but it was the first image I came across...


    Cheers,
    Al.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    What you want to achieve can't be done without the image jumping as you would need to set a positive 15deg rotation in order to counteract the -15deg rotation on the DIV, what you would need to do is have the background and the image as separate children either inside your DIV or your anchor tag and animate only the child that's not the image.

  3. #3
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Chris, I was playing around with it and came up with this - LINK - having the icon and background color separate from the div that is rotating... It's working ok, I don't think I'm overly happy with the coding though...

    Thanks again.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can do it with your original code by setting a counter rotation on the image at the same time which has the effect that it doesn;t appear to move.

    e.g.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Box Rotate</title>
    <meta charset=utf-8>
    <style>
    body {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	width: 100%;
    	float: left;
    }
    #content {
    	width: 1000px;
    	margin: 0 auto;
    }
    #boxRow {
    	float: left;
    	width: 100%;
    	margin: 50px 0 0 0;
    }
    .box, .boxLast {
    	float: left;
    	margin-right: 25px;
    }
    .boxLast { margin: 0; }
    /* or */
    .box:last-child { margin:0 }
    .box a {
    	display: block;
    	width: 176px;
    	height: 176px;
    	line-height:176px;
    	border:1px solid #fff;
    	text-align:center;
    	background-color: #298ae9;
    	-webkit-transition: all 0.6s ease 0s;
    	transition: all 0.5s ease 0s;
    	position:relative;
    }
    .box img {
    	position:absolute;
    	left:0;
    	top:0;
    	right:0;
    	bottom:0;
    	margin:auto;
    	-webkit-transition: all 0.6s ease 0s;
    	transition: all 0.5s ease 0s;
    }
    .box:hover a {
    	-webkit-transform: rotate(-15deg);
    	-moz-transform: rotate(-15deg);
    	-o-transform: rotate(-15deg);
    	-ms-transform: rotate(-15deg);
    	transform: rotate(-15deg);
    	-webkit-transition: all 0.5s ease 0s;
    	transition: all 0.5s ease 0s;
    	background-color: #0e9c49;
    }
    .box:hover img {
    	-webkit-transform: rotate(15deg);
    	-moz-transform: rotate(15deg);
    	-o-transform: rotate(15deg);
    	-ms-transform: rotate(15deg);
    	transform: rotate(15deg);
    	-webkit-transition: all 0.5s ease 0s;
    	transition: all 0.5s ease 0s;
    }
    img { border: 0; }
    </style>
    </head>
    <body>
    <div id="wrapper">
    		<div id="content">
    				<div id="boxRow">
    						<div class="box"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
    						<div class="box"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
    						<div class="box"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
    						<div class="box"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
    						<div class="box boxLast"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
    				</div>
    		</div>
    </div>
    </body>
    </html>
    So while you turn the parent clockwise you then turn the child anti-clockwise at the same time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •