JsFiddle: http://jsfiddle.net/E4s9k/
HTML:
<body>
<section id="pics" class="clearfix">
<figure
id="pic1"
class="pictures"
>
<img
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<figcaption class="figuredetails">Fig1</figcaption>
</figure>
<figure
id="pic2"
class="pictures"
>
<img
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
<figcaption class="figuredetails">Fig2</figcaption>
</figure>
</section>
<section id="content">
<p>hello</p>
</section>
</body>
CSS:-
#CHARSET "UTF-8";
#pics{
width:100%;
padding: 50px 50px;
}
.pictures{
float: left;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
.pictures img{
width:100%;
height:auto;
}
#pic1{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
z-index: -1
}
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
#content{
clear: both;
}
.pictures > .figuredetails{
color: red;
padding-left: 20px;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
JQuery:
function pichoverfunc() {
$(this).css({"z-index":10});
}
function pichoverfuncO() {
$(this).css({"z-index":-10});
}
$(document).ready(
$("#pic2").hover(pichoverfunc, pichoverfuncO)
);
I'm trying to do something like this:-
Show 2 rotated images on the top of each other.
When hovered above any image (even near its egde), that image should come to the front and the one that is in front should go to back
This is a future things (in my to-do list) - Use more than 2 images to achieve the same functionality as in step 2.
The problem:
1. I cant hover on the second image
2. (This is linked to the requirement 3 above) If there are more than 2 images, then, how should I choose z-index for each image that is in the back?
What I've tried:-
I've used the Dev tools in chrome to inspect the #pic2 but, I still cant select it.
As I'm new to HTML, CSS, and Jquery, Any help would be great.
You dont need to use Jquery to change an element on hover. CSS has this functionality built in, take a look at this link. As you can see you can set a css class or id to change on hover. So for instance:
#pic2{
position: absolute;
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
/* z-index: -2; */
}
Then below that you could put somthing like this:
#pic2:hover{
z-index:10;
}
This should change the z-index of pic2 on hover with only CSS, also if you want to do this with many images try using a class instead of an id or maybe just do it using tag name. So for instance assign class="img-hover" to all the images youd like. Then in your css put:
.img-hover:hover{
z-index:10;
}
or if you want to just apply the hover to all img tags youd just put:
img:hover{
...
}
The root cause why your script does not work is probably the fact that:
z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.
Read more on the z-index: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
When it comes to your JSFiddle, I cleaned it up a bit and simplified it a bit - http://jsfiddle.net/E4s9k/
HTML:
<body>
<img
id="pic1"
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<img
id="pic2"
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
</body>
JS:
function handlerIn() {
$('img').css({"z-index": -10}); //Push all images back
$(this).css({"z-index": 10}); //Bring our target to front
}
function handlerOut() {
$('img').css({"z-index": 10}); //Bring all our images to front
$(this).css({"z-index": -10}); //Push target back
}
$(document).ready(function(){
$("img").hover(handlerIn, handlerOut);
});
CSS:
img {
position: relative;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
#pic1{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#pic2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
Related
I am trying to use ngRepeat to load an image and play it's associated tone, then move the image from the center of the circle to a specific position on a circle, and proceed with the doing the same thing with the next image. I got the images to display and move one by one using ng-enter-stagger, however the images have different positions so when I change it to to use a different class for each repetition, ng-enter-stagger does not work.
How can I go about loading one image, moving it to the proper position, hiding the image, then proceeding with the next image?
I have created a plunkr but the animation does not work in it https://plnkr.co/edit/DddST6JsemsCKKf3mQ6N?p=preview.
An example of what I want to do is the Learn the sounds part of this (http://www.absolutepitchstudy.com/animalgame/) click either Start Control or Start Animal Game
The data looks like this:
"ImageTones":[{"CPosition":"deg60","Image":{"ImageFileName":"Alligator.png","ImageId":1},"Tone":{"ToneFileName":"C3.mp4","ToneId":1}},
{"CPosition":"deg0","Image":{"ImageFileName":"Cow.png","ImageId":4},"Tone":{"ToneFileName":"B5.mp4","ToneId":2}},
{"CPosition":"deg270","Image":{"ImageFileName":"Bird.png","ImageId":3},"Tone":{"ToneFileName":"E3.mp4","ToneId":3}}]
Html page:
<div class="circle-container">
<div ng-repeat="it in model.imageTones" class="it.CPosition">
<img ng-src="../Content/Game/Animals/{{it.Image.ImageFileName}}"/>
<!--Audio tag goes here-->
</div>
</div>
My CSS (I may be able to fix this to not have as many classes, just am unsure how)
.circle-container {
position: relative;
width: 38em;
height: 38em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 80%;
margin: -5.25em auto 0;
}
.circle-container div {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container div.ng-enter {
transition: 5s linear all;
opacity: 0;
}
.circle-container div.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 5.0s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
.circle-container div.ng-enter.ng-enter-active {
/* standard transition styles */
opacity:1;
}
.deg0.ng-enter-active {
transform: translate(19em);
}
.deg30.ng-enter-active {
transform: rotate(30deg) translate(19em) rotate(-30deg);
}
.deg60.ng-enter-active {
transform: rotate(60deg) translate(19em) rotate(-60deg);
}
.deg90.ng-enter-active {
transform: rotate(90deg) translate(19em) rotate(-90deg);
transition: transform 5s;
}
.deg120.ng-enter-active {
transform: rotate(120deg) translate(19em) rotate(-120deg);
}
.deg150.ng-enter-active {
transform: rotate(150deg) translate(19em) rotate(-150deg);
}
.deg180.ng-enter-active {
transform: rotate(180deg) translate(19em) rotate(-180deg);
}
.deg210.ng-enter-active {
transform: rotate(210deg) translate(19em) rotate(-210deg);
}
.deg240.ng-enter-active {
transform: rotate(240deg) translate(19em) rotate(-240deg);
}
.deg270.ng-enter-active {
transform: rotate(270deg) translate(19em) rotate(-270deg);
}
.deg300.ng-enter-active {
transform: rotate(300deg) translate(19em) rotate(-300deg);
}
.deg330.ng-enter-active {
transform: rotate(330deg) translate(19em) rotate(-330deg);
}
There's a couple of errors to look at 1st, To get a value of a class from an angular item, it's ng-class you should be looking for:
<div ng-repeat="it in model.imageTones" ng-class="it.CPosition" ng-if="!it.hidden" >
<img ng-src="http://www.absolutepitchstudy.com/animalgame/content/images/{{it.Image.ImageFileName}}" />
</div>
Then in you style sheet there seems to be something wrong with the CSS, so I removed a class that wasn't being used:
.deg60{
transform: rotate(60deg) translate(19em) rotate(-60deg);
}
Although to hide stuff you may want that back.
The updated plunk with the work so far is at:
plunky
Now it's being rendered in the right place, you can use $timeout, ng-click or someother method to alter the class definition in your model. The position of the graphic should automatically update.
What method were you going to use?
On my webpage I have a div. On that div I have "animation" that simulates the div being turned over (flipped).
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
I rotate the "wrapper" div with the jQuery plugin transit. What the plugin does is just apply the CSS;
transform: rotateY(180deg);
When the div is on rotateY(90deg), I have to load some new content in the #content div. This takes a minuscule amount of time, but in the animation you can see that the div is gone/hidden fore that time.
SEE DEMO FIDDLE
(note that I don't have the actual content loading in here)
Is it possible to have the dive not totally disappearing when rotateY(90)?
Unfortunately I have no control over the HTML itself because it is being generated.
Try to add thickness to it. Refer to something like this: want to show the thickness of an element while it rotate
But make the animation of the css:
0%: transform: rotateY(0deg);
50%:transform: rotateY(90deg);
100%:transform: rotateY(180deg);
Hope this helps.
Make sure the jQuery plugin has css files or look into it.
And also you could do this using basic css and jQuery.
Don't change the contents of the div, just create two sides:
<div id="wrapper">
<div class="side-a">
Some content
</div>
<div class="side-b">
Some content
</div>
</div>
CSS:
#wrapper{
transition: all 2s;
position: relative;
}
#wrapper.flip{
transform: rotateY(180deg);
}
.side-a{
z-index: 1;
opacity: 1;
position: absolute;
height: 100%;
transition-delay: 1s; //half the transition time of the wrapper
}
.side-b{
z-index: 0;
opacity: 0;
transform: rotateY(180deg);
position: absolute;
height: 100%;
transition-delay: 1s;
}
.flip side-a{
z-index: 0;
opacity: 0;
}
.flip side-b{
z-index: 1;
opacity: 1;
}
Javascript:
$('.next-slide').click(function(){
$('#wrapper').addClass('flip');
});
$('.prev-slide').click(function(){
$('#wrapper').removeClass('flip');
});
I have a list Hexagons In my web page like this
I had to use transform:rotate to have a correct text in it but in chrome text is Blurry ,in Mozilla it shows correctly
I searched a lot but there were no exact way.
I used this article to make these hexagons
http://www.queness.com/resources/html/css3-hexagon/index.html
and this is my html
<div class="hex hex-3">
<div class="inner">
<h4>Energy</h4>
<hr />
<p>
</p>
</div>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
and some part of css which I used transform:rotate in it
.hex {
transform: rotate(30deg);
-webkit-transform:rotate(30deg);
}
.inner {
transform: rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.hex .corner-1 {
z-index: -1;
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-87px, 0px);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-48px, -11px);
bottom: 0;
}
any idea how to fix it?
Have been busy and it took me a while to find out but following css solves the issue:
.hex .corner-1,
.hex .corner-2,
.hex .corner-1:before,
.hex .corner-2:before {
backface-visibility: inherit !important;
}
I was just having a similiar issue with a project that had a skewY tranform and found the bug while working on that, though in my project it was caused by a unnecessary rotateZ(0) transform.
I had a button that rotated text along the Y axis , giving it a mirrored look. This no longer works for some reason because the button has been placed on the child (popup) and the text to be mirrored is on the parent.
Is there a javascript function i could use to rotate the text on the parent when a button is clicked / rotate it back when its clicked again. (preferably a toggle switch)
This is what I originally had when it was only one the parent page:
HTML link :
<li><a class="button small icon-text-height flipx" href="#" onclick="return false;"></a></li>
The CSS for the div with the text:
article .teleprompter
{
padding: 300px 50px 1000px 100px;
font-size: 30px !important;
line-height: 86px;
z-index: 1;
background-color: #141414;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
The CSS for the flipx part:
article .teleprompter.flipx
{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
z-index: 1;
pointer-events: none;
padding: 300px 50px 1000px 100px !important;
}
JS I Think should work:
<script>
function flipTXT(color)
{
if (parent_window && !parent_window.closed) {
parent_window.document.getElementById("teleprompter").style['-webkit-transform'] = rotateY(180deg);
}
}
</script>
I think one of the two solutions seen in the code at Bin below may work for you:
http://jsbin.com/buqexusamuda/1/
HTML
<p>Card: Flip</p>
<div class="card" href="#">Hello</div>
<p>Card 2: Mirror</p>
<div class="card card2" href="#">Hello</div>
CSS
.card, .card2 {
position: relative;
animation: all 2.5s;
perspective: 1000;
transition: 0.6s;
transform-style: preserve-3d;
width: 90px;
height: 32px;
text-align: center;
line-height: 32px;
z-index: 1;
background-color: #ccc;
color: #666;
}
.card2 { transform-origin: right center; }
.card.flip { transform: rotateY(180deg); }
SCRIPT
jQuery(".card").click(function(){
$(this).toggleClass("flip");
});
The simplest solution would be to use jQuery to add/remove the classes. If you can include jQuery, then you can do something along these lines:
<script>
$(document).ready(function(){
//Since the text is on the parent, you need to access it.
var parentWindow = window.opener;
//This gets the parent's DOM so you can grab the text from the parent window.
var parentDom = parentWindow.document;
//This grabs the text you want to transform.
var targetText = parentDom.getElementsByClassName("teleprompter");
//This toggles the class
$(".button").on('click', function(){
$(targetText).toggleClass("flipx");
});
});
</script>
I used a combination of jQuery and regular javascript so you don't have to roll your own code to add/remove and check for classes.
Here's the code to include jQuery in your page in case you don't have it handy:
This one will work with older non-HTML 5 compliant browsers and modern browsers.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This one will only work with more modern browsers:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a doubt.
I need to implement a flip menu, but on the internet I found only examples using css transformations, and vendors prefix. But all examples show divs that are not fixed, and the css below have a fixed menu (copied and pasted code and reduce the net, is not very pretty) and when I have a menu and the approaches of put font and back divs don't work.
I need help with this. I need a way in which whole site (including the set menu) are replaced with other content (as a great turning of the page).
Example: http://davidwalsh.name/css-flip
I need a horizontal flip, and right horizontal flip.
Thank you so much.
CodePen: http://codepen.io/anon/pen/BuHql
HTML:
<div class="nav">
<ul>
<li>Home</li>
<li>CSS</li>
<li>PHP</li>
<li>SEO</li>
<li>jQuery</li>
<li>Wordpress</li>
<li>Services</li>
</ul>
<div class="clear"></div>
</div>
</div>
CSS:
body { height: 800px; background: black; }
.nav{ background: white; z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}
.nav { height: 42px; background: white;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}
An easy way to do this, in otherwise case, is using the following construction:
HTML:
<div class="flipper">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>
CSS:
/*Placing colors to facilitate understanding.*/
.front { background: green; }
.back { background: red; }
/*Add this class to a ".flipper" element using the way that is well to you (using a click, a hover or any other trigger).*/
.flip {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
/*Add others vendors styles to more compatibility*/
}
/*Configuring the duration and the 3d mode of command*/
.flipper {
position: relative; /*relative is very important*/
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 2s;
-webkit-transition: 0.6s;
}
/*Required for no appear both at the same time*/
.front {
z-index: 2;
}
/*Causes the back start hidden (it is rotated 180 degrees, so it will not appear)*/
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
/*Hide the rear face during the flip.*/
.front, .back {
position: relative; /*Again, the relative position is very important to work on any layout without crash.*/
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/*needed for webkit browsers understand what's in front and what is behind*/
body {
perspective: 1000;
-webkit-perspective: 1000;
}
JS (jQuery) use example:
$('body').hover(function () {
$('.flipper').addClass('flip');
});
$('body').click(function () {
$('.flipper').removeClass('flip');
});
There is a simple jquery plugin that can help you achieving this effect.
You can find it here:
http://guilhemmarty.com/flippy//
It is easy to use and you can choose what kind of flip you want. ;)