preserve-3d not working in IE10

preserve-3d not working in IE10 - html

<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

Related

Problems with hexagon images css?

I am trying to make avatar as a hexagon, I have found a css snippet for doing this, but it only worked for non-square images:
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon1 {
width: 80px;
height: 50px;
}
<div class="hexagon hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url('https://media-exp1.licdn.com/dms/image/C560BAQG-vLQJr3J3zg/company-logo_200_200/0?e=2159024400&v=beta&t=cXNxHCDmX7A_e_LGk75XIbL-eVc7VYdHQfSFH39r3Qo')"></div>
</div>
</div>
<br />
<div class="hexagon hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url('https://poemesurleprophete.com/wp-content/uploads/2018/09/la-seule-force.jpg')"></div>
</div>
</div>
The problem as you can see, with images where width equals height it is not exactly a hexagon, I tried to set the background-size to cover, it worked but part of the image is being cropped. Any idea how to solve this?

it's because the hexagon-in2 is rectangular, put in his css class:
width:72%;
margin:0 14%;
background-size:cover;
It will look like:
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 72%;
margin: 0 14%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon1 {
width: 80px;
height: 50px;
}
<div class="hexagon hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url('https://media-exp1.licdn.com/dms/image/C560BAQG-vLQJr3J3zg/company-logo_200_200/0?e=2159024400&v=beta&t=cXNxHCDmX7A_e_LGk75XIbL-eVc7VYdHQfSFH39r3Qo')"></div>
</div>
</div>
<br />
<div class="hexagon hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url('https://poemesurleprophete.com/wp-content/uploads/2018/09/la-seule-force.jpg')"></div>
</div>
</div>
hope it will help

Flexbox image match container height

I have 4 images on my site and display 2 vertically with 2 horizontal images next to these in a grid.
The problem I'm having is that the images line up correctly when the page is desktop size but when it is scaled down to mobile the images will scale differently and look out of alignment
As you can see the vertical images on the left don't scale to fit the container height, is there a way to stretch these images to match the container height?
How can I get the images to stay aligned at all times?
* {
box-sizing: border-box;
}
.home-promo-wrap {
display: flex;
flex-wrap: wrap;
}
.home-promo-cell {
display: flex;
flex: 0 0 50%;
}
.gridA {
display:flex;
flex-wrap: wrap;
flex: 1 1 auto;
}
.gridB {
display:flex;
flex-wrap: wrap;
}
.cell {
display: flex;
flex: 0 0 50%;
padding: 10px;
}
.gridB .cell:nth-child(1) {
flex: 0 0 100%;
}
.gridB .cell:nth-child(2) {
flex: 0 0 100%;
}
.text-vertical {
position: absolute;
top: 0;
left: 0;
right: 0;
color: #000;
z-index: 1;
text-align: center;
background: rgba( 255,255,255,0.6);
padding: 20px;
}
.inner-cell-vertical:hover .text-vertical {
background: rgba(255,255,255,0);
transition: background 0.8s ease;
}
.inner-cell-vertical {
position: relative;
overflow: hidden;
background: #ff00ff;
}
.inner-cell-vertical img {
width: 100%;
height: auto;
display: block;
overflow:hidden;
}
.inner-cell-vertical::after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,.6);
animation-name: fadeFromtop;
-webkit-animation-name: fadeFromtop;
animation-duration: 300ms;
-webkit-animation-duration: 300ms;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
overflow: hidden;
}
.inner-cell-vertical:hover .text {
bottom: 50%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-o-transform: translateY(50%);
}
.text {
position: absolute;
top:0;
left:0;
padding-left: 35px;
padding-bottom: 17px;
transition: all 0.5s ease;
height: 100%;
}
a {
display: flex;
}
a:hover .inner-cell-vertical:after {
animation-name: fadeFromBottom;
-webkit-animation-name: fadeFromBottom;
animation-duration: 300ms;
-webkit-animation-duration: 300ms;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-fill-mode: forwards;
opacity:1;
overflow: hidden;
}
#keyframes fadeFromBottom {
0%{
opacity:0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
display: block;
}
}
#keyframes fadeFromtop {
0%{
opacity:1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100%{
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(400%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
<div class="home-promo-wrap">
<div class="home-promo-cell">
<div class="gridA">
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div><img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" /></div>
</a>
</div>
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="home-promo-cell">
<div class="gridB">
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_3.jpg" alt="" />
</div>
</a>
</div>
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_4.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>

If to keep the img you could use object-fit.
Note, object-fit has limits when it comes to browser support: https://caniuse.com/#feat=object-fit
If you need better browser support, here is a sample using background-image: jsfiddle demo.
The main with this version is to set a height and nested flex containers.
Stack snippet
* {
box-sizing: border-box;
}
.home-promo-wrap {
display: flex;
flex-wrap: wrap;
}
.home-promo-cell {
display: flex;
flex: 0 0 50%;
}
.gridA {
display:flex;
flex-wrap: wrap;
flex: 1 1 auto;
}
.gridB {
display:flex;
flex-wrap: wrap;
}
.cell {
display: flex;
flex: 0 0 50%;
padding: 10px;
}
.gridB .cell:nth-child(1) {
flex: 0 0 100%;
}
.gridB .cell:nth-child(2) {
flex: 0 0 100%;
}
.text-vertical {
position: absolute;
top: 0;
left: 0;
right: 0;
color: #000;
z-index: 1;
text-align: center;
background: rgba( 255,255,255,0.6);
padding: 20px;
}
.inner-cell-vertical:hover .text-vertical {
background: rgba(255,255,255,0);
transition: background 0.8s ease;
}
.inner-cell-vertical {
position: relative;
overflow: hidden;
background: #ff00ff;
}
.inner-cell-vertical img {
width: 100%;
height: 100%; /* changed */
display: block;
overflow:hidden;
object-fit: cover; /* added */
}
.inner-cell-vertical::after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,.6);
animation-name: fadeFromtop;
-webkit-animation-name: fadeFromtop;
animation-duration: 300ms;
-webkit-animation-duration: 300ms;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
overflow: hidden;
}
.inner-cell-vertical:hover .text {
bottom: 50%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-o-transform: translateY(50%);
}
.text {
position: absolute;
top:0;
left:0;
padding-left: 35px;
padding-bottom: 17px;
transition: all 0.5s ease;
height: 100%;
}
a {
display: flex;
}
a:hover .inner-cell-vertical:after {
animation-name: fadeFromBottom;
-webkit-animation-name: fadeFromBottom;
animation-duration: 300ms;
-webkit-animation-duration: 300ms;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-fill-mode: forwards;
opacity:1;
overflow: hidden;
}
#keyframes fadeFromBottom {
0%{
opacity:0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
display: block;
}
}
#keyframes fadeFromtop {
0%{
opacity:1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100%{
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(400%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
<div class="home-promo-wrap">
<div class="home-promo-cell">
<div class="gridA">
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div><img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" /></div>
</a>
</div>
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="home-promo-cell">
<div class="gridB">
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_3.jpg" alt="" />
</div>
</a>
</div>
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_4.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>

I believe its a one line change at line number 64 in the css.
height: auto; to height: 100%;
.inner-cell-vertical img {
width: 100%;
height: 100%;
display: block;
overflow:hidden;
}
Here is the Pen. Please let me know whether this helps.

Using position:absolute changes elements placed in next columns in bootstrap

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> &nbsp Test1</li>
<li><i class="fa fa-question-circle" aria-hidden="true"></i> &nbsp Test2</li>
<li><i class="fa fa-briefcase" aria-hidden="true"></i> &nbsp Test3</li>
<li><i class="fa fa-users" aria-hidden="true"></i> &nbsp Test4</li>
<li><i class="fa fa-address-book" aria-hidden="true"></i> &nbsp 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.

How to build a circular navbar in bootstrap 3

I am trying to build an imitation of this amazing circular navbar.
Norse has done an amazing job on it
<div class="container-fluid" id="factoid-info-container">
<!-- INFO -->
<div class="row factoid-top factoid-row">
<div class="col-sm-12 factoid-info-center visible-xs" id="center-title-mobile">
<div id="factoid-title-mobile">
<h2>what we do</h2>
</div>
</div>
<div class="col-sm-5">
<div id="factoid-info-7" class="fact text-right">
<h3 class="ft fact-title-7" style="opacity: 0.2;">
47 Countries
</h3>
<p class="factoid-content" id="factoid-content-7" style="display: none;">
Norse Operates In 47 Countries Around The Globe
</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div id="factoid-info-1" class="fact text-left">
<h3 class="ft fact-title-1" style="opacity: 0.2;">
1,500
</h3>
<p class="factoid-content" id="factoid-content-1" style="display: none;">
Norse weighs more than 1,500 actuarial variables in risk score
calculations for every IP address, and resources more than 1M addresses
every day.
</p>
</div>
</div>
</div>
<div class="row factoid-middle factoid-row">
<div class="col-sm-4">
<div id="factoid-info-6" class="fact text-right">
<h3 class="ft fact-title-6" style="opacity: 0.2;">
16,000,000
</h3>
<p class="factoid-content" id="factoid-content-6" style="display: none;">
Norse operates as a tier-1 carrier, controlling more than
16 million ipv4 addresses and operating 6 autonomous systems worldwide
</p>
</div>
</div>
<div class="col-sm-4 col-sm-offset-4">
<div id="factoid-info-2" class="fact text-left">
<h3 class="ft fact-title-2 factoid-color" style="opacity: 1;">
6,000
</h3>
<p class="factoid-content" id="factoid-content-2" style="display: block;">
Norse sensors and honeypots can emulate more than 6,000 commonly-attacked devices and applications.
</p>
</div>
</div>
</div>
<div class="row factoid-bottom factoid-row">
<div class="col-sm-4">
<div id="factoid-info-5" class="fact text-right">
<h3 class="ft fact-title-5" style="opacity: 0.2;">
8,000,000 SENSORS
</h3>
<p class="factoid-content" id="factoid-content-5" style="display: none;">
Norse receives instant attack telemetry from more than 8 million sensors
deployed everywhere in the world.
</p>
</div>
</div>
<div class="col-sm-4">
<div id="factoid-info-4" class="fact text-center">
<h3 class="ft fact-title-4" style="opacity: 0.2;">200,000 TOR NODES</h3>
<p class="factoid-content" id="factoid-content-4" style="display: none;">
Norse Tracks more than 200,000 tor exit nodes: that's
five times more than any other intelligence source
</p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div id="factoid-info-3" class="fact text-left">
<h3 class="ft fact-title-3" style="opacity: 0.2;">7 PETABYTES</h3>
<p class="factoid-content" id="factoid-content-3" style="display: none;">
Norse’s operates the world’s largest commercial attack intelligence
database, with more than 7 Petabytes of detailed attack histories.
</p>
</div>
</div>
</div>
<div class="hidden-xs" id="center-title">
<div id="factoid-title">
<h2>what we do</h2>
</div>
</div>
<!-- CIRCLE NAV -->
<div class="factoid-nav">
<div id="slider"><div class="jcs-panel noselect" style="border-width: 11px; border-radius: 506px;"><div class="jcs" style="width: 484px; height: 484px; border-radius: 484px;"><span class="jcs-value" style="width: 220px; height: 220px; font-size: 55px; top: 101px; left: 101px;">80</span></div><div class="jcs-indicator" style="width: 55px; height: 55px; top: 200.286px; left: 368.494px; transform: rotate(80deg);"> </div></div></div>
<div id="white-border-slider"></div>
<div id="slider-bg"></div>
</div>
</div>
Has anyone tried to build something like this?
If yes can you give me some direction on how to proceed

Try with this below code it may help you.
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
});
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 015, 255, 0.15);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 1s, z-index 0.3s, transform 1s;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.menu .btn .fa {
font-size: 3em;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu .btn:hover .fa { color: rgba(255, 255, 255, 0.7); }
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.menu .btn.trigger:hover .line { background-color: rgba(255, 255, 255, 0.7); }
.menu .btn.trigger:hover .line:before,
.menu .btn.trigger:hover .line:after { background-color: rgba(255, f15, 255, 0.7); }
.menu .btn.trigger .line {
width: 60%;
height: 6px;
background: #000;
border-radius: 6px;
-webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before,
.menu .btn.trigger .line:after {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 6px;
background: #000;
border-radius: 6px;
-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger .line:before {
top: -12px;
-webkit-transform-origin: 15% 100%;
-ms-transform-origin: 15% 100%;
transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
top: 12px;
-webkit-transform-origin: 25% 30%;
-ms-transform-origin: 25% 30%;
transform-origin: 25% 30%;
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.menu.active .trigger .line {
height: 0px;
top: 45%;
}
.menu.active .trigger .line:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
width: 110%;
}
.menu.active .trigger .line:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 110%;
}
/* horrible things are happening here
for some reason nth-child(1) is always busy and elements starting from 2 */
.rotater:nth-child(1) {
-webkit-transform: rotate(-22.5deg);
-ms-transform: rotate(-22.5deg);
transform: rotate(-22.5deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateX(-10em) rotate(22.5deg);
-ms-transform: translateX(-10em) rotate(22.5deg);
transform: translateX(-10em) rotate(22.5deg);
}
.rotater:nth-child(2) {
-webkit-transform: rotate(22.5deg);
-ms-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-22.5deg);
-ms-transform: translateX(-10em) rotate(-22.5deg);
transform: translateX(-10em) rotate(-22.5deg);
}
.rotater:nth-child(3) {
-webkit-transform: rotate(67.5deg);
-ms-transform: rotate(67.5deg);
transform: rotate(67.5deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-67.5deg);
-ms-transform: translateX(-10em) rotate(-67.5deg);
transform: translateX(-10em) rotate(-67.5deg);
}
.rotater:nth-child(4) {
-webkit-transform: rotate(112.5deg);
-ms-transform: rotate(112.5deg);
transform: rotate(112.5deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-112.5deg);
-ms-transform: translateX(-10em) rotate(-112.5deg);
transform: translateX(-10em) rotate(-112.5deg);
}
.rotater:nth-child(5) {
-webkit-transform: rotate(157.5deg);
-ms-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.menu.active .rotater:nth-child(5) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-157.5deg);
-ms-transform: translateX(-10em) rotate(-157.5deg);
transform: translateX(-10em) rotate(-157.5deg);
}
.rotater:nth-child(6) {
-webkit-transform: rotate(202.5deg);
-ms-transform: rotate(202.5deg);
transform: rotate(202.5deg);
}
.menu.active .rotater:nth-child(6) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-202.5deg);
-ms-transform: translateX(-10em) rotate(-202.5deg);
transform: translateX(-10em) rotate(-202.5deg);
}
.rotater:nth-child(7) {
-webkit-transform: rotate(247.5deg);
-ms-transform: rotate(247.5deg);
transform: rotate(247.5deg);
}
.menu.active .rotater:nth-child(7) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-247.5deg);
-ms-transform: translateX(-10em) rotate(-247.5deg);
transform: translateX(-10em) rotate(-247.5deg);
}
.rotater:nth-child(8) {
-webkit-transform: rotate(292.5deg);
-ms-transform: rotate(292.5deg);
transform: rotate(292.5deg);
}
.menu.active .rotater:nth-child(8) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-292.5deg);
-ms-transform: translateX(-10em) rotate(-292.5deg);
transform: translateX(-10em) rotate(-292.5deg);
}
.rotater:nth-child(9) {
-webkit-transform: rotate(337.5deg);
-ms-transform: rotate(337.5deg);
transform: rotate(337.5deg);
}
.menu.active .rotater:nth-child(9) .btn-icon {
-webkit-transform: translateX(-10em) rotate(-337.5deg);
-ms-transform: translateX(-10em) rotate(-337.5deg);
transform: translateX(-10em) rotate(-337.5deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-codepen"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-facebook"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-google-plus"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-dribbble"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-linkedin"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-github"></i>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon">
<i class="fa fa-behance"></i>
</div>
</div>
</div>
</div>

On Hover Effect Not Working

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

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

preserve-3d not working in IE10 - html

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

Related

Problems with hexagon images css?

Flexbox image match container height

Using position:absolute changes elements placed in next columns in bootstrap

How to build a circular navbar in bootstrap 3

On Hover Effect Not Working

Categories

Resources