We Keep Coding

How to limit clicks on elements

My idea is to create flipping card game. When user flip the card he receives the points, which are randomly generated. Okay, now the user can flip the card and check how much points he will receive, but I want to limit how many cards he can flip. For example, there are 4 cards now. Only 2 of them should be able to open. I'll be thankful for every advice.
$('.front').html('dd');
$('.card').each(function() {
$(this).on("click", function() {
$(this).addClass("flipped");
});
});
function getNumber() {
$('.card .back').each(function() {
var minNumber = 0;
var maxNumber = 2;
var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
$(this).html(randomnumber);
});
}
getNumber();
.container {
width: 200px;
height: 260px;
float: left;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>

To limit the number of cards which can be flipped, add a condition to the click handler which checks how many cards there are with the class flipped. If two already exist then you can disallow any further clicks from having an effect.
Also note that you don't need the each() loop to add a click() handler to multiple elements. Similarly you don't need a loop to set the html(), just provide a function which returns the value to set. Try this:
$('.front').html('dd');
$('.card').on("click", function() {
if ($('.flipped').length < 2) {
$(this).addClass("flipped");
} else {
console.log('You already flipped two cards!');
}
});
function getNumber() {
var minNumber = 0;
var maxNumber = 2;
$('.card .back').html(function() {
return Math.floor(Math.random() * (maxNumber + 1) + minNumber);
});
}
getNumber();
.container {
width: 200px;
height: 260px;
float: left;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>

Multiple Card Flip jQuery

I'm looking to have multiple cards flip individually, but I'm not that well versed in jQuery/JS and I'm having issues with figuring out the code, and could use a little help. Also, the tiles aren't flipping back over when clicked.
$('.js-click').on('click', function() {
$('.card').not(this).removeClass('flipped');
$('.card').toggleClass('flipped');
});
$('.js-click1').on('click', function() {
$('.card').not(this).removeClass('flipped');
$('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click1">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

Looks like the issue came from trying to find the appropriate .card element (looks like it was finding both of them) and then removing a class + toggling a class will always add it:
remove .flipped
toggle .flipped
.flipped is always added
so you'll never turn your cards back over.
Quick fix, look for the clicked element's parent() and target that...
$('.js-click').on('click', function() {
$(this).parent('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

First you'll want to give both cards the class of js-click so that you can target both of them with the same $('.js-click') selector. Then as you want to flip the target's .card, all you have to do is toggle the class flipped on $(this).parent().
This can be seen in the following:
$('.js-click').on('click', function() {
$(this).parent().toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

You are toggling the flipped class on all elements with .card what you need it to do it just for the associated elements like
$(this).closest('.card').toggleClass('flipped');
Moreover, you can reduce your code by assigning js-click class to both buttons
Here is snippet
$('.js-click').on('click', function() {
$(this).closest('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

inserting a text box at top of the page

I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>

Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.

Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});

You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>

Edges of hexagons are not showing smooth in chrome

I have an issue which comes in Chrome i created a hexagon group with HTML and CSS. It display well in firefox but in chrome the edges of hexagons are displaying distorted. My codes are followings
HTML
<div class="col-sm-12 margin-left-100" id="sortable">
<div id="c_1" class="hexagon hexagon2 sort">
<div class="hexagon-in1">
<div class="hexagon-in2">
<div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
</div>
</div>
</div>
<div id="c_2" class="hexagon hexagon2 sort">
<div class="hexagon-in1">
<div class="hexagon-in2">
<div class="inner inner-left text-center"><i class="fa fa-eye"></i></div><div class="inner inner-right text-center"><i class="fa fa-link"></i></div>
</div>
</div>
</div>
</div>
CSS
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2{
background: #6B6A6A;
}
.hexagon1 {
width: 200px;
height: 100px;
margin: 0 0 0 -80px;
}
.hexagon2 {
float: left;
width: 80px;
height: 117px;
margin: -20px 0 0 20px;
}
.inner{position: relative;color: #FFF; display: none; padding-top: 6px; background: #009999;width: 50px;width: 34px;height: 32px;border-radius: 25px;}
div#sortable .hexagon:nth-child(5) {
margin-left: 5px;
}
div#sortable .hexagon:nth-child(10) {
margin-left: 50px;
}
div#sortable .hexagon:nth-child(14) {
margin-left: 100px;
}
See on jsfiddle https://jsfiddle.net/vinie23/2jsqmgw2/
Please help me. Your help would be appreciated. Thanks In advance.

To get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility: hidden;.
Fiddle: https://jsfiddle.net/2jsqmgw2/11/

Try this:
.hexagon-in2{
background: #6B6A6A;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
You could also use some vectors to get crisper lines and less code, thus optimizing page speed/load.
EDIT: Solution is above me: -webkit-backface-visibility: hidden;

How can I maintain proper boundaries on CSS triangles when hovering with cursor?

Is it possible to fix the hovering on http://jsfiddle.net/2AXhR/ so that the correct triangle is activated on hover instead of its sometimes adjacent one? Sometimes the wrong triangle is activated because each triangle element's bounding area is not actually a triangle, but a rectangle, so even though the cursor may appear to be on top of one triangle, it is actually on top of another one that overlaps and has a higher z-index.
<style type="text/css">
.t {
position:relative;
top:55px;
left:5px;
}
.t div {
position:absolute;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #0079c5 transparent;
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
cursor:pointer;
transform-origin:200px 173px;
-webkit-transform-origin:200px 173px;
-moz-transform-origin:200px 173px;
z-index:10;
}
.t div:hover {
z-index:20;
border-color: transparent transparent #009cff transparent;
}
.t div:nth-child(1) {
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
}
.t div:nth-child(1):hover {
transform:rotate(30deg) translate(-15%, -10%);
-webkit-transform:rotate(30deg) translate(-15%, -10%);
-moz-transform:rotate(30deg) translate(-15%, -10%);
}
.t div:nth-child(2) {
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
.t div:nth-child(2):hover {
transform:rotate(90deg) translate(-15%, -10%);
-webkit-transform:rotate(90deg) translate(-15%, -10%);
-moz-transform:rotate(90deg) translate(-15%, -10%);
}
.t div:nth-child(3) {
transform:rotate(150deg);
-webkit-transform:rotate(150deg);
-moz-transform:rotate(150deg);
}
.t div:nth-child(3):hover {
transform:rotate(150deg) translate(-15%, -10%);
-webkit-transform:rotate(150deg) translate(-15%, -10%);
-moz-transform:rotate(150deg) translate(-15%, -10%);
}
.t div:nth-child(4) {
transform:rotate(210deg);
-webkit-transform:rotate(210deg);
-moz-transform:rotate(210deg);
}
.t div:nth-child(4):hover {
transform:rotate(210deg) translate(-15%, -10%);
-webkit-transform:rotate(210deg) translate(-15%, -10%);
-moz-transform:rotate(210deg) translate(-15%, -10%);
}
.t div:nth-child(5) {
transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
}
.t div:nth-child(5):hover {
transform:rotate(270deg) translate(-15%, -10%);
-webkit-transform:rotate(270deg) translate(-15%, -10%);
-moz-transform:rotate(270deg) translate(-15%, -10%);
}
.t div:nth-child(6) {
transform:rotate(330deg);
-webkit-transform:rotate(330deg);
-moz-transform:rotate(330deg);
}
</style>
<div class="t">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

----- Version 2, cleaner, better (fixes IE and FF issues) -----
Corrected issues :
IE ignored the overflow:hidden; property and the hover events were fired outside the visible triangles.
For some reason there were lines apearing on the triangles in firefox.
the cursor comes back to default if it is between the triangles.
Description :
This aproach uses skewX() to create the triangles. You don't need the "border trick" to create them and you don't need the overflow property either. With this technique, there no overlapping elements at all so hover events can't fire two elements at the same time.
A second div hides half the skewed element to create the triangle and is translated with it on hover using the + CSS selector.
----- DEMO V2 -----
Markup :
<div class="t">
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
</div>
CSS :
.t div{
position:absolute;
top:0; left:0;
transform-origin:0 0;
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
}
.t .wrap{
top:50%; left:50%;
-ms-transform: skewX(30deg);
-webkit-transform: skewX(30deg);
transform: skewX(30deg);
}
.t .wrap .triangle {
position:relative;
width: 200px;
height: 173px;
background-color: #0079c5;
cursor:pointer;
z-index:1;
}
.t .wrap .mask{
width:100%;
height:115.5%;
background-color: #fff;
left:100%;
z-index:2;
-ms-transform: skewX(-30deg) rotate(30deg);
-webkit-transform: skewX(-30deg) rotate(30deg);
transform: skewX(-30deg) rotate(30deg);
}
.t .wrap .triangle:hover{
background-color: #009cff;
transform: translate(10%, 10%);
-webkit-transform: translate(10%, 10%);
-moz-transform: translate(10%, 10%);
}
.t .triangle:hover + .mask{
-ms-transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
-webkit-transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
transform: skewX(-30deg) rotate(30deg) translate(17.5%, 0);
}
.t > div:nth-child(2){
-ms-transform: rotate(60deg) skewX(30deg);
-webkit-transform: rotate(60deg) skewX(30deg);
transform: rotate(60deg) skewX(30deg);
}
.t > div:nth-child(3){
-ms-transform: rotate(120deg) skewX(30deg);
-webkit-transform: rotate(120deg) skewX(30deg);
transform: rotate(120deg) skewX(30deg);
}
.t > div:nth-child(4){
-ms-transform: rotate(-60deg) skewX(30deg);
-webkit-transform: rotate(-60deg) skewX(30deg);
transform: rotate(-60deg) skewX(30deg);
}
.t > div:nth-child(5){
-ms-transform: rotate(-120deg) skewX(30deg);
-webkit-transform: rotate(-120deg) skewX(30deg);
transform: rotate(-120deg) skewX(30deg);
}
.t > div:nth-child(6){
-ms-transform: rotate(-180deg) skewX(30deg);
-webkit-transform: rotate(-180deg) skewX(30deg);
transform: rotate(-180deg) skewX(30deg);
}
Vesrion 1 (original) : fiddle for demo V1

Here is a completely different approach. It avoids the boundary issues completely.
It's worth noting that this approach is relatively limited when it comes to achieving the hover effect you had in place. I'm currently looking at alternatives.
EXAMPLE HERE - Works in FF/Chrome it fails in IE11.
HTML
<div class="t">
<div class="clip">
<div class="triangle"></div>
</div>
<div class="clip">
<div class="triangle"></div>
</div>
<div class="clip">
<div class="triangle"></div>
</div>
<div class="clip">
<div class="triangle"></div>
</div>
<div class="clip">
<div class="triangle"></div>
</div>
<div class="clip">
<div class="triangle"></div>
</div>
</div>
CSS
.t {
width:500px;
height:500px;
position:relative;
}
.t > .clip {
overflow: hidden;
position: absolute;
width: 50%;
height: 50%;
-webkit-transform-origin: 100% 100%;
}
.t > .clip:first-child {
-webkit-transform: rotate(60deg) skewY(30deg);
}
.t > .clip:nth-child(2) {
-webkit-transform: rotate(120deg) skewY(30deg);
}
.t > .clip:nth-child(3) {
-webkit-transform: rotate(180deg) skewY(30deg);
}
.t > .clip:nth-child(4) {
-webkit-transform: rotate(240deg) skewY(30deg);
}
.t > .clip:nth-child(5) {
-webkit-transform: rotate(300deg) skewY(30deg);
}
.t > .clip:nth-child(6) {
-webkit-transform: rotate(360deg) skewY(30deg);
}
.triangle {
width: 200%;
height: 200%;
-webkit-transform: skewY(-42deg) skewX(-20deg) rotate(-15.5deg);
background:#0079c5;
}
.triangle:hover {
background:#009cff;
}

I actually solved the problem on my own. Using JavaScript, I set a hover event for each triangle: On hover, I set its own z-index to 20, the next triangle's z-index to 21, and all the rest of the triangles' z-index to 19.
The code looks like this:
self.e.find(".t div").hover(
function() {
$(this).css({
'z-index': 20,
'border-color': "transparent transparent "+self.params['colorSelected']+" transparent"
});
if($(this).next().length) {
$(this).next().css("z-index", 21);
} else {
self.e.find(".t div").first().css("z-index", 21);
}
},
function() {
self.e.find(".t div").css({
'z-index': 19,
'border-color': "transparent transparent "+self.params['color']+" transparent"
});
});
The reason why it works is because all the triangles are in order starting from the top left going clockwise. Each triangle incorrectly overlaps its next sibling, so by bringing the next sibling forward in the z plane, it allows the triangles to be defined correctly.
Compare these two JSFiddles, and you'll see the difference in hover behavior:
Unsolved: http://jsfiddle.net/2AXhR/
Solved: http://jsfiddle.net/2AXhR/1/