Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with CSS Transform to rotate text on click

    http://www.multianglexxx.com

    In the FAQ section at the bottom of the page, you will see the text "❯Tyrannosaurus Rex". I am trying to get the arrow to rotate so it is pointing down when you click on the element. I am trying to recreate what is seen here in the FAQ - http://kck.st/Z1HJRR

    Please help!

    Thanks!
    Last edited by funmed; 03-22-2014 at 09:31 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,712
    Thanks
    25
    Thanked 660 Times in 659 Posts
    I don't see a "Report This Post" anywhere. The images on the OPs page are not suitable for younger viewers.
    Use you brains man and either remove the background image or post the code here.

    Mod should hide this post til complied with.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello funmed,
    Maybe you could use some js like this demo - Untitled Document
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    So I messed around with this for a while and didn't have much luck till I started styling the span separately. Have a look at what I came up with here -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { color: #000000; }
    body { font-family: 'Pontano Sans'; }
    body { text-align: center; }
    body {
    	color: #333333;
    	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-size: 14px;
    	line-height: 20px;
    }
    #csp3-content { max-width: 500px; }
    #csp3-content {
    	background-clip: padding-box;
    	background-color: rgba(245, 245, 245, 0.6);
    	border: 1px solid #E6E6E6;
    	border-radius: 8px;
    	float: none;
    }
    #csp3-content {
    	/*display: none;*/
    	margin: 60px auto;
    	max-width: 600px;
    	padding: 30px;
    }
    #faq {
    	border-top: 1px dotted #000000;
    	clear: both;
    	padding-bottom: 15px;
    	padding-top: 25px;
    }
    .faq-header {
    	font-size: 16px;
    	font-weight: bold;
    }
    p { margin: 0 0 10px; }
    .accordion {
    	background-color: rgba(255, 255, 255, 0.5);
    	border-radius: 10px;
    	width: 100%;
    }
    .accordion { margin-bottom: 20px; }
    .accordion input { display: none; }
    input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; }
    input[type="radio"], input[type="checkbox"] {
    	line-height: normal;
    	margin: 4px 0 0;
    }
    label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; }
    input, textarea, .uneditable-input { margin-left: 0; }
    input, textarea, .uneditable-input { width: 206px; }
    input, button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    label, input, button, select, textarea {
    	font-size: 14px;
    	font-weight: normal;
    	line-height: 20px;
    }
    button, input { line-height: normal; }
    button, input, select, textarea {
    	font-size: 100%;
    	margin: 0;
    	vertical-align: middle;
    }
    .accordion label {
    	color: #000000;
    	cursor: pointer;
    	display: block;
    	font-weight: bold;
    	height: 30px;
    	line-height: 40px;
    	padding: 5px 20px;
    	text-align: left;
    }
    label a {
    	display: block;
    	margin-bottom: 5px;
    }
    label, input, button, select, textarea {
    	font-size: 14px;
    	font-weight: normal;
    	line-height: 20px;
    }
    label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; }
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    	.accordion label span {
    		display: inline-block;
    		color: #03c;
    		-webkit-transition: 0.5s;
    		-moz-transition: 0.5s;
    		-o-transition: 0.5s;
    		-ms-transition: 0.5s;
    		transition: 0.5s;
    	}
    	.accordion label:hover span {
    		-webkit-transform: rotate(450deg);
    		-moz-transform: rotate(450deg);
    		-o-transform: rotate(450deg);
    		-ms-transform: rotate(450deg);
    		transform: rotate(450deg);
    		color: #f00;
    	}
    </style>
    </head>
    <body>
    	<div id="csp3-content">
    		<div id="faq">
    			<p class="faq-header">FAQ</p><!--this should use a header tag-->
    			<div class="accordion">
    				<!-- Panel 1 -->
    					<div><!--unnamed, unstyled div-->
    						<input id="panel1" type="checkbox" />
    								<label for="panel1"><span class="arrow">❯</span>Tyrannosaurus Rex</label>
    						<article>
    							<p>
    								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida nisi sed elit posuere eleifend. 
    								In dapibus convallis sem vel rhoncus. Donec bibendum eros non purus lacinia lacinia. Vivamus fermentum 
    								erat ut ornare placerat. Suspendisse quis enim imperdiet, tincidunt nisi non, venenatis mi. Proin 
    								commodo in augue et scelerisque. Integer id lacus at leo gravida iaculis non eget libero. Donec 
    								egestas malesuada est sit amet bibendum. Pellentesque lacinia id neque id tincidunt.
    							</p>
    						</article>
    				</div>
    			<!--end .accordion--></div>
    		<!--end faq--></div>
    	<!--end csp3-content--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2013
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    So I messed around with this for a while and didn't have much luck till I started styling the span separately. Have a look at what I came up with here -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { color: #000000; }
    body { font-family: 'Pontano Sans'; }
    body { text-align: center; }
    body {
    	color: #333333;
    	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-size: 14px;
    	line-height: 20px;
    }
    #csp3-content { max-width: 500px; }
    #csp3-content {
    	background-clip: padding-box;
    	background-color: rgba(245, 245, 245, 0.6);
    	border: 1px solid #E6E6E6;
    	border-radius: 8px;
    	float: none;
    }
    #csp3-content {
    	/*display: none;*/
    	margin: 60px auto;
    	max-width: 600px;
    	padding: 30px;
    }
    #faq {
    	border-top: 1px dotted #000000;
    	clear: both;
    	padding-bottom: 15px;
    	padding-top: 25px;
    }
    .faq-header {
    	font-size: 16px;
    	font-weight: bold;
    }
    p { margin: 0 0 10px; }
    .accordion {
    	background-color: rgba(255, 255, 255, 0.5);
    	border-radius: 10px;
    	width: 100%;
    }
    .accordion { margin-bottom: 20px; }
    .accordion input { display: none; }
    input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; }
    input[type="radio"], input[type="checkbox"] {
    	line-height: normal;
    	margin: 4px 0 0;
    }
    label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; }
    input, textarea, .uneditable-input { margin-left: 0; }
    input, textarea, .uneditable-input { width: 206px; }
    input, button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
    label, input, button, select, textarea {
    	font-size: 14px;
    	font-weight: normal;
    	line-height: 20px;
    }
    button, input { line-height: normal; }
    button, input, select, textarea {
    	font-size: 100%;
    	margin: 0;
    	vertical-align: middle;
    }
    .accordion label {
    	color: #000000;
    	cursor: pointer;
    	display: block;
    	font-weight: bold;
    	height: 30px;
    	line-height: 40px;
    	padding: 5px 20px;
    	text-align: left;
    }
    label a {
    	display: block;
    	margin-bottom: 5px;
    }
    label, input, button, select, textarea {
    	font-size: 14px;
    	font-weight: normal;
    	line-height: 20px;
    }
    label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; }
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    	.accordion label span {
    		display: inline-block;
    		color: #03c;
    		-webkit-transition: 0.5s;
    		-moz-transition: 0.5s;
    		-o-transition: 0.5s;
    		-ms-transition: 0.5s;
    		transition: 0.5s;
    	}
    	.accordion label:hover span {
    		-webkit-transform: rotate(450deg);
    		-moz-transform: rotate(450deg);
    		-o-transform: rotate(450deg);
    		-ms-transform: rotate(450deg);
    		transform: rotate(450deg);
    		color: #f00;
    	}
    </style>
    </head>
    <body>
    	<div id="csp3-content">
    		<div id="faq">
    			<p class="faq-header">FAQ</p><!--this should use a header tag-->
    			<div class="accordion">
    				<!-- Panel 1 -->
    					<div><!--unnamed, unstyled div-->
    						<input id="panel1" type="checkbox" />
    								<label for="panel1"><span class="arrow">❯</span>Tyrannosaurus Rex</label>
    						<article>
    							<p>
    								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida nisi sed elit posuere eleifend. 
    								In dapibus convallis sem vel rhoncus. Donec bibendum eros non purus lacinia lacinia. Vivamus fermentum 
    								erat ut ornare placerat. Suspendisse quis enim imperdiet, tincidunt nisi non, venenatis mi. Proin 
    								commodo in augue et scelerisque. Integer id lacus at leo gravida iaculis non eget libero. Donec 
    								egestas malesuada est sit amet bibendum. Pellentesque lacinia id neque id tincidunt.
    							</p>
    						</article>
    				</div>
    			<!--end .accordion--></div>
    		<!--end faq--></div>
    	<!--end csp3-content--></div>
    </body>
    </html>
    This is pretty darn close to what I need. Thanks! I have it working right, except I need this transition to happen on click (when input:checked), not on hover. I tried to adjust the code, but I just could not get it. I changed the code to this for now, but it still needs some work.

    .accordion label span {
    display: inline-block;

    }
    .accordion label:hover span {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);

    }

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,744
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there funmed

    does this basic example help...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>rotate on click</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    #rotate {
        width:460px;
        padding:20px;
        margin:auto;
        border:1px solid #999;
        border-radius:10px;
        background-color:#fff;
        box-shadow:inset 0 0 20px #999;
        color:#666;
        cursor:pointer;
        outline:none;
     }
    #rotate span {
        display:inline-block;
        color:#03c;
        -webkit-transition:0.5s;
        -moz-transition:0.5s;
        -o-transition:0.5s;
        -ms-transition:0.5s;
        transition:0.5s;
     }
    #rotate:focus span {
        color:#f00;
        -webkit-transform:rotate(450deg);
        -moz-transform:rotate(450deg);
        -o-transform:rotate(450deg);
        -ms-transform:rotate(450deg);
        transform:rotate(450deg);
     }
    </style>
    
    </head>
    <body>
    
    <div id="rotate" tabindex="1"><span>&gt;</span> Lorem ipsum dolor sit amet</div>
    
    </body>
    </html>

    coothead

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Nice work Coot!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,744
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Excavator,

    did you notice that the "tabindex attribute" is required for the "pseudo-class focus".

    coothead

  • #9
    New Coder
    Join Date
    Dec 2013
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    aaaaa
    Last edited by funmed; 03-24-2014 at 10:30 AM.

  • #10
    New Coder
    Join Date
    Dec 2013
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok, here is the code I have working now...

    .accordion span {
    display:inline-block;
    padding-right:10px;
    }

    #panel1:checked + label span.arrowRotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    color:#76CC1E;
    }

    .arrowRotate {
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    }



    <label for="panel1"><span class="arrowRotate">❯</span> Tyrannosaurus Rex</label>



    My question now is how do I vertically center the arrow after it is rotated? It is aligned to the top the way it is now. Please take a look and see - http://www.multianglexxx.com
    Last edited by funmed; 03-24-2014 at 10:32 AM.


  •  

    Posting Permissions

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