Can't seem to figure out how to get these buttons to align both vertically and horizontally
Code in jsfiddle
CSS
#font-face {
font-family: "HemiHead";
src: url("../../fonts/hemi_head_bd_it.otf");
src: local("hemi_head_bd_it"),
url("../../fonts/hemi_head_bd_it.otf") format("opentype"),
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
.inlineWrapper {
float: left;
padding: 5px;
}
html
<div id="background">
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
You need to:
Wrap div.inlineWrapper into a div.container.
Add width: 630px, height: 210px, transform: translate(-50%, -50%), left: 50% and top: 50% to .container.
Add a width: 588px and position: relative to #backgruond
And this will center all your buttons vertically and horizontally.
Demo on dabblet
HTML:
<div id="background">
<div class="container">
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://dummyimage.com/100x100/000/fff" width="200" height="200" />
</div>
<div class="back">
<img src="http://dummyimage.com/100x100/000/fff" width="200" height="200" />
</div>
</div>
</div>
</div>
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://dummyimage.com/100x100/000/fff" width="200" height="200" />
</div>
<div class="back">
<img src="http://dummyimage.com/100x100/000/fff" width="200" height="200" />
</div>
</div>
</div>
</div>
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://dummyimage.com/100x100/000/fff" width="200" height="200" />
</div>
<div class="back">
<img src="http://dummyimage.com/100x100/000/fff" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#font-face {
font-family:"HemiHead";
src: url("../../fonts/hemi_head_bd_it.otf");
src: local("hemi_head_bd_it"), url("../../fonts/hemi_head_bd_it.otf") format("opentype"),
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
.inlineWrapper {
float: left;
padding: 5px;
}
.container {
position: relative;
width: 630px;
height: 210px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#background {
height: 588px;
position: relative;
}
Related
I create a slider with some logos, but the animation doesn't start. I create it with only css but it remains blocked. I check few time the code but I can find the answer.
The slider should scroll and change the logo, but it doesn't work.
I think that it could be also created with javascript but I'm not sure how to do it.
Can someone help me?
.slider {
width: 960px;
height: 100px;
overflow: hidden;
position: relative;
margin: auto;
}
.slider::before,
.slider::after {
content: "";
position: absolute;
width: 200px;
height: 100px;
background: linear-gradient(to right, width 0%, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
.slider::before {
top: 0;
left: 0;
}
.slider::after {
top: 0;
right: 0;
transform: rotateZ(180deg);
}
.slider .slide img {
width: 200px;
height: 100px;
}
.slider .slider-track {
display: flex;
width: calc(200px * 20);
animation: scroll 4s ease 3s infinite linear;
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-200px * 10));
}
}
<div class="slider">
<div class="slider-track">
<div class="slide">
<img src="./1.png">
</div>
<div class="slide">
<img src="./2.png">
</div>
<div class="slide">
<img src="./3.png">
</div>
<div class="slide">
<img src="./4.png">
</div>
<div class="slide">
<img src="./5.png">
</div>
<div class="slide">
<img src="./6.png">
</div>
<div class="slide">
<img src="./7.png">
</div>
<div class="slide">
<img src="./8.png">
</div>
<div class="slide">
<img src="./9.png">
</div>
<div class="slide">
<img src="./10.png">
</div>
</div>
</div>
Your animation property is wrong.
use these properties instead. This is more readable and it makes it easier to avoid similar mistakes:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
https://www.w3schools.com/cssref/css3_pr_animation.asp
.slider {
width: 960px;
height: 100px;
overflow: hidden;
position: relative;
margin: auto;
}
.slider::before,
.slider::after {
content: "";
position: absolute;
width: 200px;
height: 100px;
background: linear-gradient(to right, width 0%, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
.slider::before {
top: 0;
left: 0;
}
.slider::after {
top: 0;
right: 0;
transform: rotateZ(180deg);
}
.slider .slide img {
width: 200px;
height: 100px;
}
.slider .slider-track {
display: flex;
width: calc(200px * 20);
animation: scrolll 4s ease;
}
#keyframes scrolll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-200px * 10));
}
}
<div class="slider">
<div class="slider-track">
<div class="slide">
<img src="./1.png">
</div>
<div class="slide">
<img src="./2.png">
</div>
<div class="slide">
<img src="./3.png">
</div>
<div class="slide">
<img src="./4.png">
</div>
<div class="slide">
<img src="./5.png">
</div>
<div class="slide">
<img src="./6.png">
</div>
<div class="slide">
<img src="./7.png">
</div>
<div class="slide">
<img src="./8.png">
</div>
<div class="slide">
<img src="./9.png">
</div>
<div class="slide">
<img src="./10.png">
</div>
</div>
</div>
I have a series of images each with his own overlay. How can I have them aligned like inline-blocks? I tried adding adding display: inline-block;to .image-wrapper but the images are always all positioned in the top left corner of the div.container (Here is a jsfiddle).
Here are the html and css
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
</div>
EDIT:
revised css with dfsq suggestion to remove position:absolute; from .tweetty.
Quoting dfsq comment:
"Elements with position absolute don't contribute to the width and height of their parent container. So the image-wrapper divs just collapse as if they were empty if all children have position:absolute; "
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
I fiddled with the fiddle, and this seems to work. removed all the positioning from all but the vest. Used the inline-block display mode. Set top to -300px, and also the bottom-margin, otherwise you get a gap below the images.
.container {
/* position:relative;*/
}
.image-wrapper {
/* position: relative;*/
display: inline-block;
}
.tweetty {
/* position:absolute;
overflow:auto;
top:0;
left:0;*/
}
.image-vest {
position:relative;
top:-300px;
margin-bottom: -300px;
left:0;
background-color:#00f;
width:220px;
height:300px;
opacity:0.4;
color:#fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
(here's the JSFiddle version)
Take a look at this CodePen to see what I mean:
.perspective-container {
margin: 50px 0;
perspective: 1000px;
perspective-origin: 0 50%;
}
.card {
border: 10px solid blue;
width: 300px;
height: 300px;
overflow: hidden;
transform: rotateY(-45deg);
}
.card-inner {
width: 300px;
height: 300px;
overflow: hidden;
}
.scroller {
transform: translate(0, -100px);
}
.scroller-3d {
transform: translate3d(0, -100px, 0);
}
.will-change {
will-change: transform;
}
<h1>Incorrect (uses will-change):</h1>
<div class="perspective-container">
<div class="card"><div class="card-inner">
<div class="scroll-container">
<div class="scroller will-change">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div></div>
</div>
<h1>Incorrect (uses translate3d):</h1>
<div class="perspective-container">
<div class="card">
<div class="scroll-container">
<div class="scroller-3d">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
<h1>Correct (uses neither translate3d or will-change):</h1>
<div class="perspective-container">
<div class="card">
<div class="scroll-container">
<div class="scroller">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
I have a rotated element with perspective applied, inside of which I have a 'scrolling' div which is transformed vertically (imagine a magazine page-turn experience with scrolling divs inside each page). I added will-change: transform to the inner div and that broke the outer container overflow: hidden. This seems to be a bug with the Chrome compositor.
Does anyone know of any workarounds? I would like to keep the will-change attribute because it significantly speeds-up animations on mobile Chrome.
Edit: It looks like this is not specific to the will-change property but any property that makes the inner div its own compositing layer. When I remove the will-change property but change the transform to a translate3d that similarly improves performance and exhibits the bug. The only class on the inner div that allows the rotated parent to correctly render overflow: hidden is the one that adds the 2D transform.
Try something like this CodePen:
.container {
margin: 75px 0;
}
.card {
border: 10px solid blue;
width: 300px;
height: 300px;
overflow: hidden;
-webkit-transform: perspective(1000px) rotateY(-45deg);
transform: perspective(1000px) rotateY(-45deg);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.scroller {
-webkit-transform: translate(0, -100px);
transform: translate(0, -100px);
}
.scroller-3d {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
.will-change {
will-change: transform;
}
<h1>Uses will-change:</h1>
<div class="container">
<div class="card">
<div class="scroll-container">
<div class="scroller will-change">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
<h1>Uses translate3d:</h1>
<div class="container">
<div class="card">
<div class="scroll-container">
<div class="scroller-3d">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
<h1>Uses neither translate3d or will-change:</h1>
<div class="container">
<div class="card">
<div class="scroll-container">
<div class="scroller">
<img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
</div>
</div>
</div>
</div>
You could play with perspective() and transform-origin values.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How can I convert this design to responsive.Please help me..
java script working good. So I gave only css and html code.
The design working good in normal screen but not working in small screen.
Plese help me...
Thank you.....
This ismy css.
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */
.wrapper{ width: 100%; margin: 0 auto; background-color: #bdd3de; hoverflow: hidden;}
.flip-panel {
margin: 0 auto;
height: 130px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.flip-panel .front,
.flip-panel .back {
text-align: center;
}
.flip-panel .front {
height: inherit;
position: absolute;
top: 0;
z-index: 900;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.flip-panel .back {
height: inherit;
position: absolute;
top: 0;
z-index: 1000;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.flip-panel.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flip-panel.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
background-color: #14bcc8;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.box2{
background-color: #ff7e70;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
This is my HTML5 Part
<div class="row">
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
</div><!-- SERVICE ITEMS END-->
</div><!-- SERVICE SECTION END -->
First you need this in the <head>:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
Then in the bottom of your css you need this:
#media only screen and (max-width : 960px) {
}
Then you have to place everything from your css that you want to make responsive under this #media only screen within the curly brackets and change the width to %. Usually using width:100%; works.
Of course, there is more to this but this is the basic concept.
For Example
In the mentioned classes .flip-panel{}, .box1{}, .box2{} etc.,
where ever you have used px values to align just change it to % value.
I have a 3d cube rotation, that happens on hover. Everything works fine except one thing. When you roll over and the cube rotates showing a new side with text....the text is backwards, not sure why this is happening. I have a JS fiddle set up, and any help I can get on this would be great.
http://jsfiddle.net/c3ewZ/6/
html:
This is back
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
<div class='box'>
<div class='front face'></div>
<div class="side face">
<p>This is back</p>
</div>
</div>
</div>
css
body {
margin:0px;
padding:0px;
}
.box-scene {
-webkit-perspective: 700;
height: 180px;
float:left;
z-index: 999;
padding:0px !important;
}
.box-scene:hover .box {
-webkit-transform: rotateY(90deg);
}
.box {
width: 100%;
height: 100%;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.4s ease-out;
-webkit-transform-origin: 90px 90px -90px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: 2;
background: #d9d9d9;
}
.side {
background: #9dcc78;
-webkit-transform: rotateY(90deg);
z-index: 1;
left: 0px;
}
JS
var resizer = function () {
var width = parseInt($(".box-scene").css("width"));
$(".box").css("-webkit-transform-origin", "center center -" + width / 2 + "px");
};
resizer();
$(window).resize(function () {
resizer();
});
Rotating the panel the other way will fix the mirror imaging of the text.
.box-scene:hover .box {
-webkit-transform: rotateY(-90deg);
}