I have been following Adam Khoury's tutorial on how to make a 3d flip animation which works fine with the hover pseudo class but I'm struggling to activate the transition with java script. My aim is to click the box to activate the transition.
https://www.youtube.com/watch?v=W3eJWpvIl0g
Html:
<div class="flip3D" >
<div class="back">Box 1 - Back</div>
<div class="front" >Box 1 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 2 - Back</div>
<div class="front">Box 2 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 3 - Back</div>
<div class="front">Box 3 - Front</div>
CSS:
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s;
}
.flip3D > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 180deg );
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D:active> .front{
-webkit-transform: perspective( 600px ) rotateY( -180deg );
transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:active > .back{
-webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg ); }
Thank you!
You can use jQuery for that. And trigger the hover event once you click on the box.
Try this
$('.box').click(function () {
$('.animationElement').trigger('hover');
}
This would activate the hover event for the element. More over CSS would take action here and would trigger the animation.
Or you can use a className for that and append the classname to the element.
$('.box').click(function () {
$('.animationElement').attr('class', 'flip3D');
}
Then CSS would do the job.
Related
I am trying to achieve a flip card effect on the click of a button but I can not quite figure out the Javascript. I actually know nothing about Javascript so I have attempted to find similar solutions and alter them to my needs but with no results. Below is the CSS for how it is now as a :hover style.
You can view it here : http://dangoodeofficial.co.uk/290-2
CSS:
.flip3D {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D .front {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg );
-moz-transform: perspective(600px)RotateY( 0deg );
-ms-transform: perspective(600px)RotateY( 0deg );
-webkit-transform: perspective(600px)RotateY( 0deg );
transform: perspective(600px)RotateY( 0deg );
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .back {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg );
-moz-transform: perspective(600px)RotateY( 180deg );
-ms-transform: perspective(600px)RotateY( 180deg );
-webkit-transform: perspective(600px)RotateY( 180deg );
transform: perspective(600px)RotateY( 180deg );
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D:hover > .front {
-o-transform: perspective(600px)RotateY( -180deg );
-moz-transform: perspective(600px)RotateY( -180deg );
-ms-transform: perspective(600px)RotateY( -180deg );
-webkit-transform: perspective(600px)RotateY( -180deg );
transform: perspective(600px)RotateY( -180deg );
}
.flip3D:hover > .back {
-o-transform: perspective(600px)RotateY( 0deg );
-moz-transform: perspective(600px)RotateY( 0deg );
-ms-transform: perspective(600px)RotateY( 0deg );
-webkit-transform: perspective(600px)RotateY( 0deg );
transform: perspective(600px)RotateY( 0deg );
}
And I have buttons with classes .flip-button for the front and .flip-back for the back.
Any advice would be greatly appreciated. Thank you.
Dan
I found this plugin. It may helps you. And here there is a list of plugin that do flip effect: http://www.sitepoint.com/10-jquery-flip-effect-plugins/
Edited
This may helps you! I only toggle the class .flip in .front and .back . (http://jsfiddle.net/0x13mL26/3/)
Sorry for the misunderstanding! :)
I know you asked for javascript, but my solution is with JQuery. Use a click function on each button and then you can use Jquery's .removeClass and .addClass methods to change the class of the card that needs to be flipped when the button is being clicked. Something like this should work:
$( "#frontbutton" ).click(function() {
$("#flipcard").addClass('back');
$("#flipcard").removeClass('front');
$("#frontbutton").css("display","none");
$("#backbutton").css("display","static");
});
$( "#backbutton2" ).click(function() {
$("#flipcard").addClass('front');
$("#flipcard").removeClass('back');
$("#backbutton").css("display","none");
$("#frontbutton").css("display","static");
});
and of course you will want to hide the "backbutton" initially.
So when you click the front button, it will change the class of the "flipcard" you have making it flip. The "frontbutton" will then hide, and in its place you put the now visible "backbutton". When the back button is clicked, it should trigger the same process but opposite.
I have a card cover and back of the card. How can I flip my card from cover to back by the click on the button, like this?
Here is demo
Probably you need
html
<div class="flip3D">
<div class="back">Box 1 - Back</div>
<div class="front">Box 1 - Front</div>
</div>
css
.flip3D{ width:240px; height:200px; margin:10px; float:left; } .flip3D > .front{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); background:#FC0; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 180deg ); transform: perspective( 600px ) rotateY( 180deg ); background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D:hover > .front{ -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .flip3D:hover > .back{ -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }
http://jsfiddle.net/GDdtS/9444/
i'm a huge noob just trying to learning to code on my own.. and i'm at the point where i want my code to work in all the popular browsers .. :) .. i'm starting with Safari.. my code runs fine in chrome.. but the -webkit-transition: transform 1.0s; just happens instantly on safari for some reason.. not sure if there is an extra meta tag that I need or something.. but this is my code:
HTML
<section id="prismSection">
<h1 class="text-center">Now a Rectangular Prism</h1>
<div class="prismWrapper">
<div id="prism">
<figure class="front"><p>Front</p></figure>
<figure class="back"><p>Back</p></figure>
<figure class="right"><p class="vertical-text">Right</p></figure>
<figure class="left"><p class="vertical-text2">Left</p></figure>
<figure class="top"><p>Top</p></figure>
<figure class="bottom"><p>Bottom</p></figure>
</div>
</div>
<button class="btn btn-lg btn-primary" onclick="prismFront();">Front</button>
<button class="btn btn-lg btn-primary" onclick="prismBack();">Back</button>
<button class="btn btn-lg btn-primary" onclick="prismRight();">Right</button>
<button class="btn btn-lg btn-primary" onclick="prismLeft();">Left</button>
<button class="btn btn-lg btn-primary" onclick="prismTop();">Top</button>
<button class="btn btn-lg btn-primary" onclick="prismBottom();">Bottom</button>
</section>
CSS
#prismSection {
text-align: center;
padding-bottom: 40px;
}
#prismSection > button {
border: 2px solid black;
}
#prismSection > h1 {
color: white;
font-family: Paytone One, arial;
font-size: 2.5em;
}
#prism > figure:nth-child(1) > p,
#prism > figure:nth-child(2) > p,
#prism > figure:nth-child(3) > p,
#prism > figure:nth-child(4) > p {
color: black;
font-family: Paytone One, arial;
position: relative;
top: 50px;
font-size: 3em;
}
#prism > figure:nth-child(4) > p {
top: 65px;
}
#prism > figure:nth-child(5) > p,
#prism > figure:nth-child(6) > p {
color: black;
font-family: Paytone One, arial;
position: relative;
top: 10px;
font-size: 3em;
}
.vertical-text {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.vertical-text2 {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
.prismWrapper {
margin-top: 50px;
margin-bottom: 50px;
width: 300px;
height: 200px;
position: relative;
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
margin-right: auto;
margin-left: auto;
}
#prism {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
#prism figure {
display: block;
position: absolute;
background: #606060;
border: 2px solid white;
border-radius: 5px;
}
#prism .front,
#prism .back {
width: 296px;
height: 196px;
}
#prism .right,
#prism .left {
width: 96px;
height: 196px;
left: 100px;
}
#prism .top,
#prism .bottom {
width: 296px;
height: 96px;
top: 50px;
}
#prism .front {
transform: rotateY( 0deg ) translateZ( 50px);
-webkit-transform: rotateY( 0deg ) translateZ( 50px);
-ms-transform: rotateY( 0deg ) translateZ( 50px);
-o-transform: rotateY( 0deg ) translateZ( 50px);
-moz-transform: rotateY( 0deg ) translateZ( 50px);
}
#prism .back {
transform: rotateY( 180deg ) translateZ( 50px);
-webkit-transform: rotateY( 180deg ) translateZ( 50px);
-ms-transform: rotateY( 180deg ) translateZ( 50px);
-o-transform: rotateY( 180deg ) translateZ( 50px);
-moz-transform: rotateY( 180deg ) translateZ( 50px);
}
#prism .right {
transform: rotateY( 90deg ) translateZ( 150px );
-webkit-transform: rotateY( 90deg ) translateZ( 150px );
-ms-transform: rotateY( 90deg ) translateZ( 150px );
-o-transform: rotateY( 90deg ) translateZ( 150px );
-moz-transform: rotateY( 90deg ) translateZ( 150px );
}
#prism .left {
transform: rotateY( -90deg ) translateZ( 150px );
-webkit-transform: rotateY( -90deg ) translateZ( 150px );
-ms-transform: rotateY( -90deg ) translateZ( 150px );
-o-transform: rotateY( -90deg ) translateZ( 150px );
-moz-transform: rotateY( -90deg ) translateZ( 150px );
}
#prism .top {
transform: rotatex( 90deg ) translateZ( 100px );
-webkit-transform: rotatex( 90deg ) translateZ( 100px );
-ms-transform: rotatex( 90deg ) translateZ( 100px );
-o-transform: rotatex( 90deg ) translateZ( 100px );
-moz-transform: rotatex( 90deg ) translateZ( 100px );
}
#prism .bottom {
transform: rotatex( -90deg ) translateZ( 100px );
-webkit-transform: rotatex( -90deg ) translateZ( 100px );
-ms-transform: rotatex( -90deg ) translateZ( 100px );
-o-transform: rotatex( -90deg ) translateZ( 100px );
-moz-transform: rotatex( -90deg ) translateZ( 100px );
}
#prism {
transform: translateZ( -100px );
-webkit-transform: translateZ( -100px );
-ms-transform: translateZ( -100px );
-o-transform: translateZ( -100px );
-moz-transform: translateZ( -100px );
}
#prism.show-front {
transform: translateZ( -50px ) rotateY( 0deg );
-webkit-transform: translateZ( -50px ) rotateY( 0deg );
-ms-transform: translateZ( -50px ) rotateY( 0deg );
-o-transform: translateZ( -50px ) rotateY( 0deg );
-moz-transform: translateZ( -50px ) rotateY( 0deg );
}
#prism.show-back {
transform: translateZ( -50px ) rotateY( -180deg );
-webkit-transform: translateZ( -50px ) rotateY( -180deg );
-ms-transform: translateZ( -50px ) rotateY( -180deg );
-o-transform: translateZ( -50px ) rotateY( -180deg );
-moz-transform: translateZ( -50px ) rotateY( -180deg );
}
#prism.show-right {
transform: translateZ( -150px ) rotateY( -90deg );
-webkit-transform: translateZ( -150px ) rotateY( -90deg );
-ms-transform: translateZ( -150px ) rotateY( -90deg );
-o-transform: translateZ( -150px ) rotateY( -90deg );
-moz-transform: translateZ( -150px ) rotateY( -90deg );
}
#prism.show-left {
transform: translateZ( -150px ) rotateY( 90deg );
-webkit-transform: translateZ( -150px ) rotateY( 90deg );
-ms-transform: translateZ( -150px ) rotateY( 90deg );
-o-transform: translateZ( -150px ) rotateY( 90deg );
-moz-transform: translateZ( -150px ) rotateY( 90deg );
}
#prism.show-top {
transform: translateZ( -100px ) rotateX( -90deg );
-webkit-transform: translateZ( -100px ) rotateX( -90deg );
-ms-transform: translateZ( -100px ) rotateX( -90deg );
-o-transform: translateZ( -100px ) rotateX( -90deg );
-moz-transform: translateZ( -100px ) rotateX( -90deg );
}
#prism.show-bottom {
transform: translateZ( -100px ) rotateX( 90deg );
-webkit-transform: translateZ( -100px ) rotateX( 90deg );
-ms-transform: translateZ( -100px ) rotateX( 90deg );
-o-transform: translateZ( -100px ) rotateX( 90deg );
-moz-transform: translateZ( -100px ) rotateX( 90deg );
}
#prism {
transition: transform 1.0s;
-webkit-transition: transform 1.0s;
-ms-transition: transform 1.0s;
-o-transition: transform 1.0s;
-moz-transition: transform 1.0s;
}
Javascript
function prismFront() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-front');
}
function prismBack() {
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-back');
}
function prismRight() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-right');
}
function prismLeft() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-left');
}
function prismTop() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-front');
$('#prism').removeClass('show-bottom');
$('#prism').addClass('show-top');
}
function prismBottom() {
$('#prism').removeClass('show-back');
$('#prism').removeClass('show-right');
$('#prism').removeClass('show-left');
$('#prism').removeClass('show-top');
$('#prism').removeClass('show-front');
$('#prism').addClass('show-bottom');
}
i'll try to get a jsfiddle working soon.. thanks a ton.
Edit:
I've tried rewriting the button functions using more jquery syntax and giving each button an ID:
<script type="text/javascript">
$(function() {
$('#btnFront').on('click', function() {
$('#prism').css('transform', 'translateZ( -50px ) rotateY( 0deg )');
});
$('#btnBack').on('click', function() {
$('#prism').css('transform', 'translateZ( -50px ) rotateY( -180deg )');
});
$('#btnRight').on('click', function() {
$('#prism').css('transform', 'translateZ( -150px ) rotateY( -90deg )');
});
$('#btnLeft').on('click', function() {
$('#prism').css('transform', 'translateZ( -150px ) rotateY( 90deg )');
});
$('#btnTop').on('click', function() {
$('#prism').css('transform', 'translateZ( -100px ) rotateX( -90deg )');
});
$('#btnBottom').on('click', function() {
$('#prism').css('transform', 'translateZ( -100px ) rotateX( 90deg )');
});
});
</script>
same results.
All your transition rules apply to the "transform" rule but not the prefixed rules like -webkit-transform. Therefore it will not try to apply the transition to a -webkit-transform rule.
Try using: -webkit-transition: -webkit-transform 1.0s;
If that still does not work, use the Web Developer tools in Safari to find out which rules are applied to the elements (invalid rules will be crossed out).
EDIT: JsFiddle for clarity: link
I have an animation that expands a tiled div tag when you click the div, however I can't seem to get the active class to hold after the click, I have to hold down the mouse button or it will revert to its previous size, im not sure why.
I didn't create a jfiddle because its to hard to get everything to work right with out my custom stuff
http://snomada.com/angular_test/
is a live example.
My friend helped me out with a jsfiddle and it works but when i replicated with my code it doesnt work
http://jsfiddle.net/inpursuit/g6pf2ye1/3/
solved
body{
background: url(../images/banner.jpg);
background-size: 2000px 2000px;
background-repeat: no-repeat;
}
#content{
top:55px;
position:absolute;
margin:0px;
left:7%;
}
.tile-container{
float:left;
margin:5px;
width:400px;
height:200px;
overflow:hidden;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
}
/*.tile-container:active,
.tile-container .test {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
width:450px;
height:350px;
}
/*.tile-container:active > .tile,
.tile-container .test > .tile {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
background-size: 450px 350px;
}
*/
.tile-container{
float:left;
margin:5px;
width:400px;
height:200px;
background-color: #0000FF;
overflow:hidden;
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
background-size: 450px 350px;
}
.tile-container.beenclicked {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
background-size: 450px 350px;
width:450px;
height:350px;
}
.tile-container.beenclicked > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
background-size: 450px 350px;
}
.tile{
background:inherit;
width:inherit;
height:inherit;
float:left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding:10px;
color:#fff;
}
.circular {
width: 50px;
height: 50px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.circular img {
opacity: 0;
filter: alpha(opacity=0);
border:10px;
border-color:#fff;
}
/*
.active-tile > .tile{
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
}
*/
<html>
<head>
<title>Relic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/MetroJs.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<script src="js/MetroJs.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
$( document ).ready(function() {
$(".tile-container").click(function(){
$(this).toggleClass("beenclicked");
});
});
</script>
</head>
<body class="metro" ng-app="userProfile" ng-controller="ProfileController as post">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Relic</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="content">
<div class="tile-container" ng-repeat="userpost in post.userPost" >
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
<div class="weather-text">
<span class="location">{{userpost.title}}</span>
</div>
</div>
<div class="tile" style="background-image: url('{{userpost.image}}');" >
<div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
<div class="weather-text">
<span class="temperature">{{userpost.message}}</span>
</div>
</div>
</div>
</div>
</body>
</html>
You need to stop using the "active" pseudo class similar to what #AmuletxHeart is saying. Remove the .tile-container:active selector from your CSS and change the classname that you're adding on click to something other than "active" to remove confusion. I've created a jsfiddle that shows what you want:
http://jsfiddle.net/inpursuit/g6pf2ye1/3/
$('.tile-container').on('click', function() {
$(this).toggleClass('beenclicked');
});
.tile-container.beenclicked {
-webkit-transform: translate(0px,-100%);
-moz-transform: translate(0px,-100%);
-o-transform: translate(0px,-100%);
transform: translate(0px,-100%);
-webkit-transition: all .2s ease-in-out;
-webkit-transform: scale(1.0);
-moz-transition: all .2s ease-in-out;
-moz-transform: scale(1.0);
-o-transition: all .2s ease-in-out;
-o-transform: scale(1.0);
transition: all .2s ease-in-out;
transform: scale(1.0);
width:450px;
height:350px;
}
Almost there.
In your css, you are only defining the :active pseudo-class.
Try out:
.tile-container:active,
.tile-container.active {}
.tile-container:active > .tile,
.tile-container.active > .tile {}
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes for more info on pseudo-classes.
I think I see the problem. Use Google Chrome, inspect element to debug your website. Press F12, click on the magnifying glass icon, then select the element you want to debug.
Basics of jQuery, check if DOM is fully loaded before running any scripts.
$( document ).ready(function() {
$(".tile").click(function(){
$(this).addClass("active");
});
});
The "active" css state is triggered when your mouse is held down. Depressing the button removes the "active" state from an element.
What you want to do is use the ".active" class instead:
Original
.tile-container :active {...}
Corrected
.tile-container .active {...}
When clicking on the square tiles, you are actually click the element with class "tile". I found that out by using the magnifying glass thing.
Also, I think you are confused between "tile-container" and "title-container". Notice the additional "t".
You need to change the jQuery to add the active class to the element with class "tile"
Original
$(".title-container").click(function(){
$(this).addClass("active");
});
Corrected
$(".tile").click(function(){
$(this).addClass("active");
});
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/