I am trying to display tabs content in pure css, but i am unable to fix this height for parent. if content is more in tabs content parent content(red area) not expanding. please help to to expanding the parent (red area) when content is more and after clicking on other tab, previous tab content not hidden. please need help in two cases.
.tabs-container {
background: red;
padding: 30px;
height: 100%;
}
.tabs {
position: relative;
clear: both;
margin: 25px 0;
}
.tab {
display: block;
width: 220px;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
border-right: none;
margin-left: -1px;
position: relative;
left: 1px;
width: 200px;
display: inline-block
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 0px;
left: 220px;
background: white;
right: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid #ccc;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
<div class="tabs-container">
<div class="tabs">
<!--tabs-->
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked="">
<label for="tab-1">Tab One</label>
<!--tabs-content-->
<div class="content">
<p>Our expert team allows us to offer Protective Coating services, which is famous for its variety of benefits such as offering universal strainers for light shades, offers breath ability for preventing moisture, curing a tough flexible & abrasion
resistant coating, resistant to chalking and flaking and offering strong bonding on cement concrete, asbestos & mild steel. Our range of services finds its application in various areas like chajjas, external vertical walls, china mosaic tiles,
water tanks (externally), sloppy roofs, asbestos roof, roof terraces and stone walls. These services consist of acrylic elastomeric dust proof coating and polyurethane waterproof coatings. Protective Coating Our expert team allows us to offer
Protective Coating services, which is famous for its variety of benefits such as offering universal strainers for light shades, offers breath ability for preventing moisture, curing a tough flexible & abrasion resistant coating, resistant to
chalking and flaking and offering strong bonding on cement concrete, asbestos & mild steel. Our range of services finds its application in various areas like chajjas, external vertical walls, china mosaic tiles, water tanks (externally), sloppy
roofs, asbestos roof, roof terraces and stone walls. These services consist of acrylic elastomeric dust proof coating and polyurethane waterproof coatings.</p>
</div>
<!--tabs-content end-->
</div>
<!--tabs-->
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1" checked="">
<label for="tab-2">Tab One</label>
<!--tabs-content-->
<div class="content">
<p>Stuff for Tab One</p>
</div>
<!--tabs-content end-->
</div>
<!--tabs-->
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1" checked="">
<label for="tab-3">Tab One</label>
<!--tabs-content-->
<div class="content">
<p>Protective Coating
</p>
</div>
<!--tabs-content end-->
</div>
</div>
</div>
working codepen link
for your issue (hope it is inside html and body) then
.tabs-container {background: red;padding: 30px;height: 100%;overflow:auto;}
will work for you.
jsbin link
If i understood maybe it
html,
body {
height: 100%;
}
Related
I wrote such a code to operate opacity at check time. This worked.
#check1:checked+.box {
animation: blink 1s;
}
#keyframes blink {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
I also wanted to do the same operation when unchecking, so I added the animation property.
However, this will not work and the animation at check will not work. Why does this happen?
#check1 + .box {
animation: blink 1s;
}
#check1:checked + .box {
animation: blink 1s;
}
#keyframes blink {
0%, 99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
Also, I defined an animation with the exact same processing as another name, and it worked normally. Why does this happen? Is there a smart CSS solution?
#check1+.box {
animation: blink1 1s;
}
#check1:checked+.box {
animation: blink2 1s;
}
#keyframes blink1 {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes blink2 {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
go through it, I hope it will work for you
#check1+.box {
opacity:1;transition: 1s;
}
#check1:checked+.box {
opacity:0;transition: 1s;
}
<input type="checkbox" id="check1">
<div class="box">
<div class="content">
<p>content</p>
<button type="button">
<label for="check1">click me</label>
</button>
</div>
</div>
"...but why does it stop working when changing it to the checked pseudo-class?"
The unchecked state needs to have an explicit selector like:
#check1:not(:checked)
but that won't work with current layout because:
The trigger (i.e. <label>) is nested within the target (i.e. .box). That looks very awkward. In the updated demo, I had to remove the trigger from the flow by using:
position:absolute; z-index: 1; pointer-events:auto
and then the target (i.e. .box) pointer-events: none
The checkbox "state" is persistent so if selectors are similar, more than likely the latest version overrides previous selectors. In order to make everything animate from one keyframe I needed behavior that did not persist and had only one state -- :active.
:active
The animation occurs when the checkbox is checked/unchecked. If you take a step back check/uncheck looks a lot like click and the animation itself behaves briefly (like its namesake "blink"). The state of :active occurs when the user clicks -- specifically mousedown until mouseup.
HTML
Required
<br id='target'>
...
<a href='#target' class='link'>X</a>
CSS
Required
.box { pointer-events: none; }
.link { ...position: relative; z-index: 1;...pointer-events: auto; }
:target + .box :not(:active) { ... }
Demo 1
.box {
pointer-events: none;
}
.X {
display: inline-block;
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.1);
width: 5ch;
height: 2.5ex;
line-height: 2.5ex;
border: 2px outset grey;
border-radius: 4px;
color: #000;
text-align: center;
text-decoration: none;
padding: 1px 3px;
pointer-events: auto;
}
:target+.box :not(:active) {
animation: blink 2s linear 0.1s;
}
#keyframes blink {
0% {
opacity: 0s;
}
70% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<br id='target'>
<article class="box">
<section class="content">
<p>Content inside .box</p>
<a href='#target' class='X'>X</a>
</section>
</article>
<p>Content outside of .box</p>
I have some pretty basic accordion tabs that open when clicked and close when you click another one. I want them to be able to close when you click on the tab that is open as well though. Does anyone know how to do this?
.ac-container {
// max-width: 400px;
}
.ac-container label {
// height: 30px !important;
line-height: 21px !important;
// font-size: 12px !important;
padding: 5px 20px;
text-transform: uppercase;
font-weight: 100;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: white;
line-height: 33px;
font-size: 19px;
background: $dark-blue;
border-bottom: 2px solid $light-blue;
height: auto;
line-height: 20px;
}
.ac-container span {
position:absolute;
bottom:5px;
right:8px;
}
.ac-container {
width: 100%;
// margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label:hover {
background: $light-blue;
color:$dark-blue;
}
.ac-container input:checked + label,.ac-container input:checked + label:hover {
background: $dark-blue;
color: white;
text-transform: uppercase;
font-weight: 100;
height: auto;
line-height: 21px;
font-size: 19px;
}
.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
// background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after {
// background-image: url(../images/arrow_up.png);
}
.ac-container input {
display: none;
}
.ac-container article {
background: rgba(255,255,255,0.5);
margin-top: -1px;
overflow: hidden;
height: 0;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}
.ac-container article p {
font-style: normal;
color: #777;
line-height: 23px;
font-size: 100%;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article {
-webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small {
height: 140px;
}
.ac-container input:checked ~ article.ac-medium {
height: 180px;
}
.ac-container input:checked ~ article.ac-large {
height: 230px;
}
<section class="ac-container">
<h2>Breakfast</h2>
<div>
<input id="ac-1" name="accordion-1" type="radio" >
<label for="ac-1"><img src="img/breakfast/american.jpg" alt=""><span>American</span></label>
<article class="ac-small">
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio">
<label for="ac-2"><img src="img/breakfast/continental.jpg" alt=""></i><span>Continental</span></label>
<article class="ac-medium">
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3"><img src="img/breakfast/english.jpg" alt=""><span>English</span></label>
<article class="ac-large">
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio">
<label for="ac-4"><img src="img/breakfast/health.jpg" alt=""><span>The Healthy Stuff</span></label>
<article class="ac-large">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
</article>
</div>
<div>
<input id="ac-5" name="accordion-1" type="radio">
<label for="ac-5"><img src="img/breakfast/misc.jpg" alt=""><span>Miscellaneous</span></label>
<article class="ac-large">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
</article>
</div>
</section>
Your code doesn't work.
Your HTML doesn't have H4 tag.
Here's a working sample that works like you wanted.
$(document).ready(function() {
$('.accordion-title').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active').next('.accordion-content').slideUp();
} else {
$('.accordion-title').removeClass('active');
$('.accordion-content').slideUp();
$(this).addClass('active').next('.accordion-content').slideDown();
}
});
});
.accordion-title {
font-size: 14px;
font-weight: bold;
border: 1px solid black;
}
.accordion-content {
border: 1px solid black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-title">Title</div>
<div class="accordion-content">Content</div>
<div class="accordion-title">Title 2</div>
<div class="accordion-content">Content 2</div>
<div class="accordion-title">Title 3</div>
<div class="accordion-content">Content 3</div>
View on JSFiddle
Use input type checkbox instead of radio and write styles in css to make height zero when unchecked.
<section class="ac-container">
<h2>Breakfast</h2>
<div>
<input id="ac-1" name="accordion-1" type="checkbox" >
<label for="ac-1"><img src="img/breakfast/american.jpg" alt=""> <span>American</span></label>
<article class="ac-small">
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox">
<label for="ac-2"><img src="img/breakfast/continental.jpg" alt=""></i><span>Continental</span></label>
<article class="ac-medium">
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox">
<label for="ac-3"><img src="img/breakfast/english.jpg" alt=""><span>English</span></label>
<article class="ac-large">
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox">
<label for="ac-4"><img src="img/breakfast/health.jpg" alt=""><span>The Healthy Stuff</span></label>
<article class="ac-large">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
</article>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox">
<label for="ac-5"><img src="img/breakfast/misc.jpg" alt=""><span>Miscellaneous</span></label>
<article class="ac-large">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
</article>
</div>
</section>
I have a custom CSS button on my site, which rotates fine in Chrome, but Internet Explorer 11 is making it disappear when hovered over, instead of rotating.
You can see the button here (It's the blue "Search now!" button): LINK
When I remove this line from my index file, Chrome will then produce the same wrong effect as IE, so it makes me feel this is causing IE's issue.
<script src="http://taskbasket.net/gallery/themes/matheso/js/modernizr.custom.js"></script>
Can you offer a solution? Thank you.
Internet Explorer doesn't presently have support for preserve-3d, but the team is working to ship it in an upcoming release. That being said, simple examples like yours don't necessarily require this feature, and could be implemented in a more cross-browser manner.
I played a bit with replicating your effect by transitioning two pseudo elements independently:
<div id="button1">
<!-- Preserved your markup -->
</div>
a {
position: relative;
perspective: 500px;
}
a, a::before, a::after {
color: #FFF;
display: inline-block;
line-height: 44px;
box-sizing: border-box;
width: 155px; height: 44px;
backface-visibility: hidden;
text-decoration: none;
text-align: center;
}
a::before, a::after {
top: 0; left: 0;
position: absolute;
content: attr(data-text);
transition: transform 1s;
}
a::before {
background: #0965A0;
transform-origin: 50% 100%;
}
a::after {
background: #2195DE;
transform-origin: 50% 0%;
transform: translateY(100%) rotateX(-90deg);
}
a:hover::before {
transform: translateY(-100%) rotateX(90deg);
}
a::before, a:hover::after {
transform: translateY(0) rotateX(0);
}
Fiddle: http://jsfiddle.net/jonathansampson/ybjv8d7x/
Your effect needs preserve-3d to work.
And preserve-3d is not supported in IE, even though it is planned in the next version
By the way, it is a CSS related problem, javascript is working ok
Hopefully tis is a reallllly easy fix that I'm just not seeing, but I've been trying every solution I could find that arched even close to this in previously submitted questions and I'm just getting nowhere.
The short of it: I've got a CSS tab setup working that's great, EXCEPT for when it comes to styling the actual labels on the tabs. It works great with a single style, but as soon as I try to introduce a secondary font style (bringing the font size down to 11px), the right hand side of the tab disappears.
And unfortunately I NEED to be able to have those two different font sizes/styles displayed in the tab label. I've tried using span, div, etc. treatments but everything makes the right border of the tab go away. Any help is HUGELY appreciated!
Here's a fiddle: http://jsfiddle.net/wKtPL/
Here's my sample HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Library <div class='tab-count'> 123</div></label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Institution’s Subscriptions</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Copyright Agent</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Internet Archive</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">HathiTrust</label>
<div class="content">
content goes here
</div>
</div>
And the CSS behind it:
.tabs {
position: relative;
min-height: 550px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #dadcde;
color: #3f4b54;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
font-size: 14px;
font-weight:bold;
margin-right:5px;
}
.tab-count {
font-size: 11px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 3px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
By secondary font style do you mean the div nested in the label? If that's the one with class .tab-count you could set float:right. That will keep it in the same line.
.tab-count {
font-size: 11px;
float:right;
}
A couple of things, firstly the 123 is being hidden under the .content so you need a taller top value.
Secondly, your labels, while being position: relative; are still only being implicitly rendered as display: inline;, so it's hiding the 123 div underneath the label itself.
http://jsfiddle.net/wKtPL/1/
.tab label {
[ ... ]
display: inline-block;
min-height: 2.5em;
}
.content {
[ ... ]
top: 60px;
}
... and muck with styling as you need.
This is caused by the usage of a block element inside your label element, which is an inline element. To fix this, change your <div class='tab-count'> 123</div> to <span class='tab-count'> 123</span>. Here is a demo of it.
If you want to allow block-level elements to be placed within inline elements, you could like #setek said, use the alternative inline-block which is a kind of hybrid of block elements and inline elements.
You should never use block elements inside inline elements, since that will cause problems like this one. What was happening was that the styles for the inline <label> tag were being dragged across 2 lines, since the <div> was taking up an extra line. That dragged the left border down a line too, which is why you didn't see it anymore (it was below the other tabs).
Using a front and back panel set up on a web page to display information in paragraphs, it all works fine except for when you have abbr. tags or use links on the panel, these must be on the right hand side to work (back panel), if they appear on the left side then they do not work.
The panel seems to be broken up into two halves, where links will work on the left on the front side (have to be quick as it will start to spin when you hover over the front), this is seen by hovering the mouse cursor over the text on the rear panel as you hit the halfway mark the style of cursor changes from an arrow to a sort of capital I, this signifies where the links start to work, it is causing problems when the user changes the zoom on the page as the text slightly adjusts itself with these changes and it moves some links to the dead section of the panel, can't see why links won't work across the whole panel....
P.S. site is under construction, but can be seen at:
http://robtsani.com/our-solar-system/index.html
CSS code:
/* positioning of panel2*/
#panel2 {
position:absolute;
top: 300px; left: 790px;
perspective: 1000;
-moz-perspective: 1000;
-webkit-perspective: 1000;
z-index: 35;
}
#panel2 p {
font-size: 14px;
padding: 10px;
}
#panel2 .front {
background: rgba(204,204,51,0.5);
border-radius: 30px;
top: 0; left: 0;
z-index: 30;
padding-bottom: 20px;
}
#panel2 .back {
background: rgba(46,227,240,0.5);
border-radius: 30px;
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
top: 0; left: 0;
padding-bottom: 20px;
}
/* sets the size of the spin panel2*/
#panel2 .spin-panel {
width: 500px; height: 920px;
}
/* sets the rotation to occur on a hover over a panel*/
.spin-panel:hover .spinner {
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
/* the actual rotation*/
.spinner {
transition: all 1.9s linear;
transform-style: preserve-3d;
-moz-transition: all 1.9s linear;
-webkit-transition: all 1.9s linear;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position:relative;
}
/* sets the non facing side to be invisible */
.front, .back {
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden; /* needs this as not supported in IE10*/
position: absolute;
top:0; left:0;
}
and the html5:
<section id="panel2">
<div class = "spin-panel">
<div class = "spinner">
<div class = "front">
<article>
<h4>About...</h4>
<p>Mars is the fourth planet, etc......</p>
</article>
</div>
<div class = "back">
<article>
<h4>Missions...</h4>
<p>There have been over 40 missions to Mars in the past 50 years.
Most notable ones have been the recent landings of rover vehicles.
<a href = "http://solarsystem.nasa.gov/missions/profile.cfm? Sort=Target&Target=Mars&MCode=Pathfinder">
Pathfinder</a> landed on the surface in 1997 releasing Sojourner
the first wheeled robot to explore another planet.
</p>
<p>In 2004 the twin missions <a href = "http://solarsystem.nasa.gov/missions/profile.cfm?Sort=Target&Target=Mars&MCode=MER">
Spirit and Opportunity</a> landed on the surface of Mars. Spirit
explored years beyond its original 92 days mission.
Opportunity
is still working and has covered more than 38km as of October
2013.
</p>
</article>
</div>
</div>
</div>
</section>
Left the links in and some text on the back panel...Hope there is a simple solution to this been staring at it for days...
Ok,
Did not see the link to a similar question on the right hand side of the page near the bottom, its quick fix was to change the rotation to -180 degrees instead, this has worked and the panel can now be used on both sides, still confused though as to why it would not work with the transform set to 180 degrees ???