Please refer to code. While coding in bootstrap, I have deliberately placed one element at col-xs-4 having col-xs-offset-8 and another element at col-xs-2 in a single row; which means that the element having col-xs-2 is pushed to the next row. This works just fine. But, after I use absolute positioning for the col-xs-4 col-xs-offset-8 element, the subsequent element is also displaced. How can I avoid the next element from being displaced?
Also, to have responsive design, I don't want to use height and width properties on the cubespinner class and instead use the full horizontal space and the height of the image to be used by the col-xs-4 container. Like, currently, the animation works fine in full screen but not in resized windows. How best to achieve this?
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Test</title>
</head>
<body>
<style>
html,
body {
height: 100%;
}
body {
background-color: #111;
}
.navibar {
margin-top: 0px;
font-size: 18px;
}
.cubespinner {
-webkit-animation: spincube 10s alternate infinite;
animation: spincube 10s alternate infinite;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 53px 53px 0;
-moz-transform-origin: 53px 53px 0;
-ms-transform-origin: 53px 53px 0;
transform-origin: 53px 53px 0;
}
.cubespinner div {
position: absolute;
width: 440px;
height: 100px;
margin-top: 3px;
font-family: 'Baloo Paaji', cursive;
text-align: center;
color: #ddd;
text-decoration: underline;
border: 1px solid #888;
background: rgba(75, 105, 105, 0.8);
box-shadow: inset 0 0 20px rgba(250, 250, 250, 0.5);
-webkit-backface-visibility: hidden;
}
.cubespinner a:link {
color: #ddd;
text-decoration-color: #ddd;
}
.cubespinner a:visited,
.cubespinner a:hover,
.cubespinner a:active {
color: #5bc0de;
text-decoration-color: #5bc0de;
}
.face1 {
-webkit-transform: rotateX(0deg) translateZ(50px);
-moz-transform: rotateX(0deg) translateZ(50px);
-ms-transform: rotateX(0deg) translateZ(50px);
transform: rotateX(0deg) translateZ(50px);
}
.face2 {
-webkit-transform: rotateX(90deg) translateZ(50px);
-moz-transform: rotateX(90deg) translateZ(50px);
-ms-transform: rotateX(90deg) translateZ(50px);
transform: rotateX(90deg) translateZ(50px);
}
.face3 {
-webkit-transform: rotateX(180deg) translateZ(50px);
-moz-transform: rotateX(180deg) translateZ(50px);
-ms-transform: rotateX(180deg) translateZ(50px);
transform: rotateX(180deg) translateZ(50px);
}
.face4 {
-webkit-transform: rotateX(270deg) translateZ(50px);
-moz-transform: rotateX(270deg) translateZ(50px);
-ms-transform: rotateX(270deg) translateZ(50px);
transform: rotateX(270deg) translateZ(50px);
}
#-webkit-keyframes spincube {
0%,
100% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-webkit-transform: rotateX(-90deg);
}
50% {
-webkit-transform: rotateX(-180deg);
}
75% {
-webkit-transform: rotateX(-270deg);
}
}
#keyframes spincube {
0%,
100% {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
50% {
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
75% {
-moz-transform: rotateX(-270deg);
-ms-transform: rotateX(-270deg);
transform: rotateX(-270deg);
}
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-xs-offset-8">
<div class="cubespinner">
<div class="face1">
<img class="img-responsive" src="images/nitt.png" alt="logo">
</div>
<div class="face2">
<a href="#" target="_blank">
<h2 class="text">Text for Test Purposes</h2>
</a>
</div>
<div class="face3">
<img class="img-responsive" src="images/nitt.png" alt="logo">
</div>
<div class="face4">
<a href="#" target="_blank">
<h2 class="text">Text for Test Purposes</h2>
</a>
</div>
</div>
</div>
<div class="col-xs-4 col-md-2">
<ul class="nav nav-pills nav-stacked navibar">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i>   Test1</li>
<li><i class="fa fa-question-circle" aria-hidden="true"></i>   Test2</li>
<li><i class="fa fa-briefcase" aria-hidden="true"></i>   Test3</li>
<li><i class="fa fa-users" aria-hidden="true"></i>   Test4</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i>   Test5</li>
</ul>
</div>
</div>
</body>
</html>
EDIT: Added an image of the look I'm trying to achieve. I want this look long long with the present animation.
When you add position:absolute on an object you take it completely out of the normal DOM flow. As a result, anything you place after it will adjust as though the absolutely positioned element does not exist and simply reflow to fill the gap.
To resolve this, YOU SHOULD NEVER put abs pos on the grid elements.
Absolute should be applied to the contents of the grid, not the grid itself. This will prevent your issue from happening.
So, just put whatever you need to remain in position inside of your grid, and then apply the positioning to those elements. The rest of the page will flow as it should.
Alternately, if you set position:relative of the parent, and position:absolute on the child, you can move the child relative to the parent without impacting the rest of your DOM.
Related
Someone coded a flip box with CSS transform. It works fine in Safari and Firefox, but not in Chrome. In Chrome it continues to display the image and skews it. I tried several things in the CSS (labeled "Extra Code START") but it's not working. How do I just make the image disappear or fix this?
I made a codepen:
https://codepen.io/harmjoy/pen/ExwVarv
.collection-type-index #call-to-actions {
background:rgba(2,139,255,1)
}
.collection-type-index #our-programs-1 {
background:#f0f0f0
}
.flip {
margin: 30px auto;
position: relative;
width: 300px;
height: 200px;
color: #000;
text-align:center;
}
.flip h1 {
font-size: 30px;
font-weight: bold;
line-height:98px;
margin:0;
padding:0;
}
.flip h2 {
font-size: 21px;
font-weight: bold;
margin: 0;
padding: 0 0 12px;
}
.flip p {
font-size: 14px;
padding: 5px 0px;
margin: 0 0 8px 0;
}
.default-state, .active-state {
height: 200px;
position: absolute;
left: 0;
top: 0;
transition: transform 0.4s ease;
transform-origin: center center -50px;
-webkit-transform-origin: center center -50px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.default-state {
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
height: 100%;
display: flex;
}
.default-state img {
position: relative;
flex-shrink: 0;
}
.default-state h2 {
position: absolute;
z-index: 2;
color: #fff;
text-transform: uppercase;
width: 100%;
align-self: center;
text-shadow: 0px 1px 10px rgba(0, 0, 0, 1);
}
.active-state {
transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-o-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
.flip:hover .default-state {
height:200px;
width:300px;
transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
-webkit-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
-moz-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
-o-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
-ms-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
}
.flip:hover .active-state {
height:200px;
width:300px;
z-index: 99999;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
-webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
-moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
-o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
-ms-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
}
/* Extra Code START */
.flip:hover .active-state,
.flip:hover .default-state {
transform-origin: none;
-webkit-transform-origin: none !important;
}
.flip:hover .active-state img,
.flip:hover .default-state img {
display: none !important;
}
/* Extra Code END */
a.btn {
background: #013b59;
color: #ffffff;
font-size: 14px;
padding: 8px 20px 8px 20px;
text-decoration: none;
}
a.btn:hover {
background: #33627a;
text-decoration: none;
}
.blog-item-wrapper .post-title { display: none; }
<div class="flip" id="yui_3_17_2_1_1638546693755_910">
<div class="active-state" id="yui_3_17_2_1_1638546693755_909">
<h2>Hope After School</h2>
<a class="btn" href="/hope-after-school" id="yui_3_17_2_1_1638546693755_908">Learn More</a>
</div>
<div class="default-state">
<h2>After-School Programs</h2>
<img src="https://static1.squarespace.com/static/5b0ff9af3e2d099669c3dc55/5b1001a688251b1ccbfd906e/5b1004112b6a28f09dc1af7d/1527776479763/child-865116_1920.jpg?format=750w" alt="Childcare">
</div>
</div>
In my chrome browser there indeed was some strange artefact of the image visible although not recognisable as the image anymore. I fixed it with * { backface-visibility: hidden; } out of laziness, which worked fine but you would probably want to apply this only to the elements being transformed. backface-visibilty precisely handles the see-throughness os 3D elements which is what you are dealing with here.
I successfully created a cube in a cube, a Tesseract. But for some reason I really can't explain, the cube is moving downwards while the Animation is going on.
If you watch the scrolling bar of your browser, the entire cube is moving downwards.
And yes, of course you can "ignore" this problem by changing the margin of the parent-div-element but that doesn't solve it.
#-webkit-keyframes cube-spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#keyframes cube-spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
#-webkit-keyframes counter-rot {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#keyframes counter-rot {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.cube-wrap {
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 0%;
perspective-origin: 50% 0%;
}
.outer {
width: 300px !important;
}
.cube {
position: relative;
width: 200px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: cube-spin 8s infinite linear;
animation: cube-spin 8s infinite linear;
}
.backendtext {
position: absolute;
width: 200px;
font-size: 35px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
-webkit-animation: counter-rot 8s infinite linear;
animation: counter-rot 8s infinite linear;
}
.outer div {
width: 300px;
height: 300px;
background: rgba(255, 116, 0, 0.1);
line-height: 530px;
}
.inner div {
width: 200px;
height: 200px;
background: rgba(153, 69, 0, 0.7);
}
.cube div {
position: absolute;
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 35px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
}
.depth div.front-pane {
-webkit-transform: translateY(-100px) translateZ(100px);
transform: translateY(-100px) translateZ(100px);
}
.outer.depth div.front-pane {
-webkit-transform: translateY(-150px) translateZ(150px);
transform: translateY(-150px) translateZ(150px);
}
.depth div.back-pane {
-webkit-transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}
.outer.depth div.back-pane {
-webkit-transform: translateY(-150px) translateZ(-150px) rotateY(180deg);
transform: translateY(-150px) translateZ(-150px) rotateY(180deg);
}
.depth div.left-pane {
-webkit-transform: translateY(-100px) translateX(100px) rotateY(-270deg);
transform: translateY(-100px) translateX(100px) rotateY(-270deg);
}
.outer.depth div.left-pane {
-webkit-transform: translateY(-150px) translateX(150px) rotateY(-270deg);
transform: translateY(-150px) translateX(150px) rotateY(-270deg);
}
.depth div.right-pane {
-webkit-transform: translateY(-100px) translateX(-100px) rotateY(270deg);
transform: translateY(-100px) translateX(-100px) rotateY(270deg);
}
.outer.depth div.right-pane {
-webkit-transform: translateY(-150px) translateX(-150px) rotateY(270deg);
transform: translateY(-150px) translateX(-150px) rotateY(270deg);
}
.depth div.top-pane {
-webkit-transform: translateY(-200px) rotateX(-90deg);
transform: translateY(-200px) rotateX(-90deg);
}
.outer.depth div.top-pane {
-webkit-transform: translateY(-300px) rotateX(-90deg);
transform: translateY(-300px) rotateX(-90deg);
}
.depth div.bottom-pane {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
<div style="height: 300px; margin-top: 400px;">
<div class="cube-wrap">
<div class="cube depth inner">
<a class="backendtext">Backend</a>
<div class="front-pane"></div>
<div class="back-pane"></div>
<div class="top-pane"></div>
<div class="bottom-pane"></div>
<div class="left-pane"></div>
<div class="right-pane"></div>
</div>
<div class="cube depth outer">
<div class="front-pane">Frontend</div>
<div class="back-pane">Frontend</div>
<div class="top-pane"></div>
<div class="bottom-pane"></div>
<div class="left-pane">Frontend</div>
<div class="right-pane">Frontend</div>
</div>
</div>
//EDIT: Works fine on Chrome and Edge. Will try to add prefixes to everything and see if it solves the problem.
//EDIT2: Added Prefixes, still doesn't work on Firefox but does properly on Chrome, Edge etc.
//EDIT3: Set Overflow of the cube-wrapper to hidden but I would still love to know the reason.
When I'm hovering specific menu option, then submenu options are blocked by slideshow element. Please refer below screenshot
Highlighted in red color submenu option is blocked by slideshow. When I changed z-index value for slideshow div to negative value then it is totally disappeared otherwise it is blocking submenu.
Please let me know, if any additional information required.
Menu.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul:after, header:after, #main:after {
clear: both;
content: "";
display: table;
}
ul:before, header:before, #main:before {
content: "";
display: table;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
body {
font-family: "Raleway";
font-weight: 400;
color: #34495E;
background: #f0f0f0;
}
header {
background: #2d3f51;
padding: 0 7%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
-webkit-perspective: 1555px;
-moz-perspective: 1555px;
perspective: 1555px;
}
#main {
padding: 2.5em 7%;
}
#main .efx-info {
width: 49%;
float: left;
padding: 2em 1em;
font-weight: 700;
border-radius: .2em;
}
#main .efx-info h1 {
line-height: 1;
display: inline-block;
padding: .1em .2em;
font-size: 5em;
margin: 0;
background: #e3e3e3;
}
#main .efx-info p {
margin: 0;
}
#main #efx-name {
color: #16A085;
font-weight: 900;
border-bottom: 4px solid #f5f5f5;
}
#main #efx-ease {
color: #34495E;
}
#main .menu-chks {
position: relative;
line-height: 1;
font-size: .9em;
width: 45%;
float: right;
}
#main .menu-chks input {
margin-right: .5em;
}
#main .menu-chks input:checked + span {
color: #16A085;
}
#main .menu-chks input:checked + span:before {
content: "\f046";
}
#main .menu-chks span {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#main .menu-chks span:before {
font-family: 'FontAwesome';
position: absolute;
left: 12px;
top: 10px;
color: #3b536b;
content: "\f096";
font-size: 1.4em;
}
#main .menu-chks label {
color: #e8e8e8;
font-weight: 600;
display: inline-block;
position: relative;
margin: .25em;
background: #2d3f51;
padding: .8em 1.2em .8em 2.5em;
border-radius: .4em;
}
#main .menu-chks label:hover {
cursor: pointer;
}
nav li {
position: relative;
display: inline-block;
float: left;
}
nav a {
position: relative;
/*z-index: 599;*/
color: #f5f5f5;
background: #2d3f51;
text-decoration: none;
display: block;
padding: 1.5em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
nav a i[class*="caret"] {
color: #3b536b;
margin-left: .15em;
}
nav a:hover {
color: #16A085;
}
nav a:hover + .submenu {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
}
nav .eiob .submenu {
-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
-moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
}
nav .ln .submenu {
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
nav .ei .submenu {
-webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
-moz-transition: all 0.3s ease-in, opacity 0.2s linear;
transition: all 0.3s ease-in, opacity 0.2s linear;
}
nav .eo .submenu {
-webkit-transition: all 0.3s ease-out, opacity 0.2s linear;
-moz-transition: all 0.3s ease-out, opacity 0.2s linear;
transition: all 0.3s ease-out, opacity 0.2s linear;
}
nav .submenu {
display: block;
opacity: 0;
position: absolute;
visibility: hidden;
/* z-index: 499;*/
width: 14em;
top: 100%;
left: 0;
background: #2d3f51;
box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
transition: all 0.25s ease;
}
nav .submenu li > .submenu {
top: 0;
left: 100%;
}
nav .submenu:hover {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
}
nav .submenu li {
float: none;
display: block;
}
nav .submenu a {
width: 100%;
display: block;
font-weight: 300;
padding: 1.4em 2em;
}
nav .submenu a:hover {
color: #f5f5f5;
background: #14957c;
}
nav.rx li:hover + .submenu {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
nav.rx .submenu {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
nav.rx .submenu:hover {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/*=== Fade Dwn ===*/
nav.fd li:hover + .submenu {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fd .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
}
nav.fd .submenu:hover {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fu li:hover + .submenu {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fu .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
nav.fu .submenu:hover {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/*=== Scale ===*/
nav.sc li:hover + .submenu {
opacity: 1;
-webkit-transform: rotateY(0deg) scale(1);
-moz-transform: rotateY(0deg) scale(1);
-ms-transform: rotateY(0deg) scale(1);
-o-transform: rotateY(0deg) scale(1);
transform: rotateY(0deg) scale(1);
}
nav.sc .submenu {
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
nav.sc .submenu:hover {
-webkit-transform: rotateY(0deg) scale(1);
-moz-transform: rotateY(0deg) scale(1);
-ms-transform: rotateY(0deg) scale(1);
-o-transform: rotateY(0deg) scale(1);
transform: rotateY(0deg) scale(1);
}
/*==== Rotate ====*/
nav.rt li:hover + .submenu {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
nav.rt .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
nav.rt .submenu:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*==== Move/Skew In ====*/
nav.mv li:hover + .submenu {
-webkit-transform: translateX(0px) skewX(0deg);
-moz-transform: translateX(0px) skewX(0deg);
-ms-transform: translateX(0px) skewX(0deg);
-o-transform: translateX(0px) skewX(0deg);
transform: translateX(0px) skewX(0deg);
}
nav.mv .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateX(-40px) skewX(-7deg);
-moz-transform: translateX(-40px) skewX(-7deg);
-ms-transform: translateX(-40px) skewX(-7deg);
-o-transform: translateX(-40px) skewX(-7deg);
transform: translateX(-40px) skewX(-7deg);
}
nav.mv .submenu:hover {
-webkit-transform: skewX(0deg);
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-o-transform: skewX(0deg);
transform: skewX(0deg);
}
/*==== Door ====*/
nav.dc li:hover + .submenu {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
nav.dc .submenu {
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
nav.dc .submenu:hover {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
index.html
<!DOCTYPE html>
<!--[if lte IE 9 ]><html class="ie lt-ie9" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en-US"> <!--<![endif]-->
<head>
<meta charset='UTF-8'>
<script src="js/modernizr.js" type="text/javascript"></script>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet prefetch' href='css/normalize.css'>
<link rel='stylesheet' href='css/menu.css'>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel='stylesheet' id='flatsome-css-minified-css' href='css/flatsome.min.css' type='text/css' media='all' />
</head>
<body>
<header >
<nav id="nav" class="ry" >
<ul id="main-menu" >
<li>
<i class="fa fa-home"></i> Home
</li>
<li>
<i class="fa fa-user"></i> About <i class="fa fa-caret-down"></i>
<ul class="submenu">
<li>Meet the Team</li>
<li>Careers</li>
<li>
More Items <i class="fa fa-caret-right"></i>
<ul class="submenu">
<li>A Sub-Item</li>
<li>
A Sub-Item
</li>
<li>
A Sub-Item
</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="fa fa-shopping-cart"></i> Our Books <i class="fa fa-caret-down"></i>
<ul class="submenu">
<li>Lorem</li>
<li>Aliquam</li>
<li>Vestibulum</li>
<li>Ipsum</li>
<li>Consectetur</li>
</ul>
</li>
<li>
<i class="fa fa-comment"></i> Contact Us
</li>
</ul>
</nav>
</header>
<div id="wrapper" class="box-shadow" >
<div class="header-wrapper before-sticky">
</div><!-- .header-wrapper -->
<div id="main-content" class="site-main hfeed light">
<!-- woocommerce message -->
<div id="content" role="main">
<div class="ux-slider-wrapper relative" >
<div class="ux-slider iosSlider hide-for-small slider-style-normal slider-nav-dark slider-nav-inside slider-nav-circle js-flickity"
data-flickity-options='{
"cellAlign": "center",
"imagesLoaded": true,
"lazyLoad": 1,
"freeScroll": false,
"wrapAround": true,
"autoPlay": 6000,
"prevNextButtons": true,
"contain" : true,
"percentPosition": true,
"pageDots": true,
"selectedAttraction" : 0.1,
"friction": 0.6,
"rightToLeft": false,
"draggable": true }'
style=""
>
<div id="banner_1261757255" class="ux_banner dark " style="height:325px; " data-height="325px" role="banner">
<a href="http://xxxxx.com/up-board-books/" > <div class="banner-bg " style="background-image:url('http://www.natgen.org/wp-content/uploads/2015/07/bar2.png'); "><img src="images/uttar-pradesh-book-Banner.jpg" alt="" style="visibility:hidden;" /></div>
<div class="banner-effect effect-sparkle"></div>
<div class="row" >
<div class="inner center text-center " style="width:60%;">
<div class="inner-wrap animated fadeIn" style=" ">
</div>
</div>
</div>
</a> </div><!-- end .ux_banner -->
<div id="banner_219276103" class="ux_banner dark " style="height:325px; " data-height="325px" role="banner">
<a href="http://xxxxx.com/product-category/competition-books/magazines/" > <div class="banner-bg " style="background-image:url('images/current-affairs.jpg'); "><img src="images/current-affairs.jpg" alt="" style="visibility:hidden;" /></div>
<div class="banner-effect effect-sparkle"></div>
<div class="row" >
<div class="inner center text-center " style="width:60%;">
<div class="inner-wrap animated fadeIn" style=" ">
</div>
</div>
</div>
</a> </div><!-- end .ux_banner -->
</div>
<div class="ux-loading dark"></div>
</div><!-- .ux-slider-wrapper -->
</div>
</div><!-- #main-content -->
</div><!-- #wrapper -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/flatsome.min.js'></script>
</body></html>
You must try z- index for sub menu.
It's hard to make anything up from only your CSS without HTML, but it looks like your z-index is just not high enough. A higher (positive) z-index brings an element to front, a negative z-index brings an element further back. Remember that z-index only works with positioned elements. I see that your submenu is positioned absolute, to that shouldn't be a problem. What is the z-index of your slideshow? Is this generated with JavaScript, setting a very high z-index? Try setting the z-index of your submenu to a very high number (9999999 or so) and see what happens.
Edit: I see your HTML now. Just try to increase your z-index to a very high number and see what happens. Everything else looks alright to me.
I am trying to implement a vertical wobble effect on my anchor tag, an example can be found here:
http://ianlunn.github.io/Hover/
I have this is my mark up:
.hvr-wobble-vertical {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="pin">
<a href="#" class="hvr-wobble-vertical">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png"/></a>
<p style="text-align: center;">
some clever text.
</p>
</div>
</div>
I am currently getting no result... Can someone give me some pointers of what I may be missing?
You're missing the animation keyframes :)
.hvr-wobble-vertical {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-wobble-vertical:hover,
.hvr-wobble-vertical:focus,
.hvr-wobble-vertical:active {
-webkit-animation-name: hvr-wobble-vertical;
animation-name: hvr-wobble-vertical;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Vertical */
#-webkit-keyframes hvr-wobble-vertical {
16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes hvr-wobble-vertical {
16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="pin">
<a href="#" class="hvr-wobble-vertical">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
</a>
<p style="text-align: center;">
some clever text.
</p>
</div>
</div>
http://ianlunn.github.io/Hover/
https://github.com/IanLunn/Hover/blob/master/css/hover.css
<body> <article class="viewport">
<section class="cube">
<div>
<div class="part psm"><span data-href="#test">C1a</span></div>
<div class="part rm"> <span data-href="#test">C1b</span></div>
<div class="part ims" style="background: #f0e200;"><span data-href="#test">C1c</span></div>
<div class="part bsm"><span data-href="#test">C1d</span></div>
</div>
<div>
<div class="part ims" style="background: #f0e200;"><span data-href="#test">C2a</span></div>
<div class="part bsm"><span data-href="#test">C2b</span></div>
<div class="part pm"> <span data-href="#test">C2c</span></div>
<div class="part um"> <span data-href="#test">C2d</span></div>
</div>
<div>
<div class="part bsm"><span data-href="#test">C3a</span></div>
<div class="part rm"> <span data-href="#test">C3b</span></div>
<div class="part um"> <span data-href="#test">C3c</span></div>
<div class="part" style="background:#00a070;"><span data-href="#test">C3d</span></div>
</div>
<div>
<div class="part rm"> <span data-href="#test">C4a</span></div>
<div class="part psm"><span data-href="#test">C4b</span></div>
<div class="part" style="background:#00a070;"><span data-href="#test">C4c</span></div>
<div class="part qm"> <span data-href="#test">C4d</span></div>
</div>
<div>
<div class="part psm"><span data-href="#test">C5a</span></div>
<div class="part ims" style="background: #f0e200;"><span data-href="#test">C5b</span></div>
<div class="part qm"> <span data-href="#test">C5c</span></div>
<div class="part pm"> <span data-href="#test">C5d</span></div>
</div>
<div>
<div class="part qm"><span data-href="#test">C6a</span></div>
<div class="part pm"><span data-href="#test">C6b</span></div>
<div class="part" style="background:#00a070;"><span data-href="#test">C6c</span></div>
<div class="part um"><span data-href="#test">C6d</span></div>
</div>
</section>
Css
body{
background:#fff;
}
span{
margin: 90px 0 0 20px;
font-size:40px;
float: left;
line-height: 35px;
text-decoration: none;
color:#fff;
}
.ims > span{
font-size:125px;
margin: 120px 0px 0px 25px;
text-align: center;
float: left;
font-weight: bold;
text-decoration: none;
color:#00a070;
}
.part{
background: #00a070;
width:275px;
height:275px;
float:left;
margin:10px;
font-family: Arial;
cursor: pointer;
user-select: none;
}
.viewport {
perspective: 1300px;
-webkit-perspective: 1300px;
perspective-origin: 50% 0px;
-webkit-perspective-origin: 50% 0px;
transform: scale(0.45,0.45);
-webkit-transform: scale(0.45,0.45);
-ms-transform: scale(0.45,0.45);
}
.cube {
margin: 0 auto;
height: 600px;
width: 600px;
transition: transform 50ms linear;
-webkit-transition: transform 50ms linear;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(-25deg) rotateY(45deg);
-ms-transform: rotateX(-25deg) rotateY(45deg);
-webkit-transform: rotateX(-25deg) rotateY(45deg);
}
.cube > div {
position: absolute;
height: 592px;
width: 592px;
padding: 5px;
background-color: #fff;
color: #fff;
}
.cube > div:first-child {
transform: rotateX(90deg) translateZ(300px);
-webkit-transform: rotateX(90deg) translateZ(300px);
-ms-transform: rotateX(90deg) translateZ(300px);
}
.cube > div:nth-child(2) {
transform: translateZ(300px);
-webkit-transform: translateZ(300px);
-ms-transform: translateZ(300px);
}
.cube > div:nth-child(3) {
transform: rotateY(90deg) translateZ(300px);
-webkit-transform: rotateY(90deg) translateZ(300px);
-ms-transform: rotateY(90deg) translateZ(300px);
}
.cube > div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
-webkit-transform: rotateY(180deg) translateZ(300px);
-ms-transform: rotateY(180deg) translateZ(300px);
}
.cube > div:nth-child(5) {
transform: rotateY(-90deg) translateZ(300px);
-webkit-transform: rotateY(-90deg) translateZ(300px);
-ms-transform: rotateY(-90deg) translateZ(300px);
}
.cube > div:nth-child(6) {
transform: rotateX(-90deg) rotate(270deg) translateZ(300px);
-webkit-transform: rotateX(-90deg) rotate(270deg) translateZ(300px);
-ms-transform: rotateX(-90deg) rotate(270deg) translateZ(300px);
}
Here is code Of 3d-cube working properly for chrome and safari but not working for IE10. i found Transform-style:presev-3d, preservative:1300px,preservative-origin:50% 300px; not working for IE10. Any solution or alternative property like this which work in IE10?
Please view the JsFiddle link and help me.jsfiddle
Thank you
Shesh
preserve-3d is not supported in IE10, though it is in other current-version browsers. See http://caniuse.com/transforms3d.
The workaround for this is stated on the MSDN website:
Note: The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
Credit goes to Rob for discovering the link.
preserve-3dis not available in IE11 and below. It is in development and is included in IE for Windows 10 Technical Preview
Source: http://status.modern.ie/
Blog post: http://blogs.msdn.com/b/ie/archive/2014/11/11/living-on-the-edge-our-next-step-in-interoperability.aspx