CSS Rotation and Styling - how to?


Tags: html,css

Problem :

I am trying to create a website based on a PSD template, and I came across this particular styling pattern:

enter image description here

Now I am trying to rotate and get the styling right but I can't figure out how to do it;

except taking the background away and making it one transparent png. But then I can't handle the single elements.

This is what I have so far:

HTML:

<div class="rotate">
    <div class="text">
        Hello
    </div>
</div>
<div class="rotate">
    <div class="text">
        Hello
    </div>
</div>

CSS

.rotate{
width: 200px;
height:200px;
margin: 30px 30px;
background: red;

 -webkit-transform: rotate(30deg);

 }

.text {

width:50px;
height:50px;
padding:75px;
 -webkit-transform: rotate(-30deg);
}

It does rotate the elements and somehow the text but the alignment does not really add up as in the image.



Solution :

Because I am a nice person and love challenges, otherwise, this question should be closed, but not sure why. "Do my work for me", maybe? yeah, this option should address the why question should be closed :).

You should figure out an alternative solution for small devices.

Here's your complete jsFiddle

HTML:

<div class="container">
    <div class="col-left">
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #1</a>
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #2</a>  
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #3</a>
    </div>
    <div class="col-right">
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>    
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>
         <a href="#" class="link"><i class="fa fa-lg fa-bar-chart"></i> Link #4</a>    
    </div>
</div>

CSS:

a {
  font-family: "Open Sans", sans-serif;
  text-decoration:none;
}
a:active,
a:focus {
  color:#000000;
}
.container {
    display:block;
    width: 674px;
    margin:70px auto;
    padding-right:15px;
    padding-left:15px;
    text-align:center;
}
.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after { clear:both; }
.col-left,
.col-right {
  width: 50%;
  float: left;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.col-right {
    margin-top: 40px;
    margin-left: -64px;
}
.link {
  position:relative;
  display:block;
  padding: 60px 40px 0px 40px;
  text-align:center;
  text-transform:uppercase;
  width:120px;
  height:140px;
  color:#000;
  margin-bottom: 20px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.link:before {
  width:100%;
  height:100%;
  position:absolute;
  content:"";
  background:#ACDBFC;
  top:0;
  left:0;
  right:0;
  margin:auto;
  z-index:-1;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.link:hover {
  color:#000;
}
.link:hover:before {
  background:#FFFFFF; 
}
.link .fa {
  display:block;
  margin-bottom:10px;
}

Final output:

output


    CSS Howto..

    how to apply transition effect in expand/collapse inside gridview rows

    How to override default CSS in modern GWT applications?

    How to set overlay on a page according to page height using CSS

    How to make text on the same line different font without using extra divs?

    How to add a css transition color change for a link/div background

    how to add items into a CSS based text rotator (similar to news ticker)

    Bootstrap: how to stack divs of different heights?

    How to use jQuery's flag to swap CSS display property

    how to style this form by css (mailchimp)

    How to apply an image to a CSS ordered list in WordPress?

    How can I add a custom HTML map marker to a Nokia HERE map?

    Menu hover effect - how to reproduce this effect?

    How to set image as a button in HTML & CSS?

    How do I use Parent page to get attributes for wp_nav_menu buttons?

    How to make the contents of a div not wrap?

    how to put image on button? (css)

    How can I make this menu using only anchor tag and css Not using ul and li?

    How to align list items

    how to style this via css in Bootstrap

    How to set css style dynamically with angularjs?

    How to make Bootstrap navbar brand image larger

    Make converted joomla template show 2 colums in main content

    CSS: how to position buttons in groups across a row on a web page

    CSS - how to make responsive images

    How to highlight a row in a table on certain occasions

    HTML/CSS: How to move my navigation bar to the middle?

    How to keep Div rotated with css after flip?

    How can I put CSS and HTML code in the same file?

    How to spread three columns in CSS across a page equally

    How can I change Github markdown background?