I am trying to apply transform:translateZ(50px) to the h, p tags which should appear like it's floating since I'm using transform-style: preserve-3d. When I inspect the h, and p tags, it appears to be floating but not the text. Refer this pen here for more clarity.
HTML:
<div class="card" id="moveContainer">
<div class="card-content">
<h1>Center Text </h1>
<p>Sample papagraph</p>
</div>
</div>
CSS:
body {
background: #000;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: -webkit-box;
display: flex;
margin: 0;
height: 100vh;
}
.card {
height: 500px;
width: 500px;
margin: auto;
background: #efaefa;
opacity: 0.3;
display: flex;
border-radius: 4px;
transform-style: preserve-3d;
}
.button-primary {
min-width: 150px;
padding: 5px 10px;
min-width: 150px;
padding: 5px 10px;
transform-style: preserve-3d;
background: #ba00da;
display: inline;
}
.button-primary span {
transform: translate3d(0px, 0px, 50px);
}
.card-content {
margin: auto;
text-align: center;
transform-style: preserve-3d;
}
.card-content h1 {
transform: translateZ(50px);
}
.card-content p {
transform: translateZ(50px);
}
I am seeing that on card class, you are using opacity:0.3. That opacity is creating issue. you can read more about that from below links
enter link description here
enter link description here
var mouse_monitor = function(e) {
var x = e.pageX;
var y = e.pageY;
var aX = ((window.innerWidth/2) - x) / 30;
var aY = ((window.innerHeight/2) - y) / 10;
transform(-aX, aY , document.getElementById('moveContainer'));
}
function transform(aX , aY, ele){
ele.style = "transform: rotateX("+ aY+"deg) rotateY("+aX+"deg)";
}
window.onload = function() {
this.addEventListener('mousemove', mouse_monitor);
}
body {
background: #000;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: -webkit-box;
display: flex;
margin: 0;
height: 100vh;
}
.card {
height: 500px;
width: 500px;
margin: auto;
background: #47344b;
display: flex;
border-radius: 4px;
transform-style: preserve-3d;
}
.button-primary {
min-width: 150px;
padding: 5px 10px;
min-width: 150px;
padding: 5px 10px;
transform-style: preserve-3d;
background: #ba00da;
display: inline;
}
.button-primary span {
transform: translate3d(0px, 0px, 50px);
}
.card-content {
margin: auto;
text-align: center;
transform-style: preserve-3d;
color: white;
}
.card-content h1 {
transform:translateZ(100px);
}
.card-content p {
transform:translateZ(50px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="card" id="moveContainer">
<div class="card-content">
<h1>Center Text </h1>
<p>Sample papagraph</p>
</div>
</div>
</body>
</html>
Related
I want to use z-index first time, and I have problem with it. I try to position the left leave (#ahorn) behind the .circle, but it appear just behind the text, not the background. How can I achieve this? The animation is secondary now, not so important yet. The positioning is my big problem and the primary requirement.
screenshot
/* NOTE: top */
#top {
background: url(../img/top.jpg) bottom left no-repeat;
min-height: 700px;
text-align: center;
color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
.circle { /* NOTE: kellenek még a falevelek */
float: right;
background: #FDAB3B;
width: 500px;
height: 500px;
margin: 20px auto;
border-radius: 50%;
border: 5px dashed #fff;
box-shadow: 0 0 0 10px #FDAB3B;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
/* NOTE: falevelek animáció */
#ahorn2 {
position: absolute;
top: -30px;
right: 0;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
}
#ahorn {
position: absolute;
top: 20px;
left: -50px;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
z-index: -1;
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<section id="top">
<div class="center-box">
<div class="circle">
<div class="caption-text">
<h1>Őszi<br>specialitások</h1>
<p>sütőtökös pite<br>rebarbarás pite</p>
<a class="button" href="#">Rendelek</a>
</div>
<div id="ahorn2">
<img src="img/ahorn_2.svg" alt="">
</div>
<div id="ahorn">
<img src="img/ahorn.svg" alt="">
</div>
</div>
</div>
</section>
Just Remove the z-index from .circle
<html>
<head>
<style>
#top {
background: url(../img/top.jpg) bottom left no-repeat;
min-height: 700px;
text-align: center;
color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
.circle {
/* NOTE: kellenek még a falevelek */
float: right;
background: #FDAB3B;
width: 500px;
height: 500px;
margin: 20px auto;
border-radius: 50%;
border: 5px dashed #fff;
box-shadow: 0 0 0 10px #FDAB3B;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.caption-text {
z-index: 10;
font-size: 30px;
}
/* NOTE: falevelek animáció */
#ahorn2 {
position: absolute;
top: -30px;
right: 0;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
}
#ahorn {
position: absolute;
top: 20px;
left: -50px;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
z-index: -10;
}
.button {
background-color: #742D4D;
color: #fff;
padding: 5px;
text-decoration: none;
border: 3px solid #fff;
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<section id="top">
<div class="center-box">
<div class="circle">
<div class="caption-text">
<h1>Őszi<br>specialitások</h1>
<p>sütőtökös pite<br>rebarbarás pite</p>
<a class="button" href="#">RENDELEK</a>
</div>
<div id="ahorn2">
<img src="https://via.placeholder.com/200x200" alt="">
</div>
<div id="ahorn">
<img src="https://via.placeholder.com/200x200" alt="">
</div>
</div>
</div>
</section>
</body>
</html>
I find the answer right now. I must add to the grand-parent element(#top .center-box) a position:relative, and a z-index 10, the parent element(.circle) a z-index:initial, and the child(#ahorn) a z-index:-1. So it's work fine. Thanks for all!
answer found here
Flip animation is not working correctly if it has some element inside with position property. This can be only reproduced on the first hover attempt after the page load.
Does anyone know why it has such behavior?
HTML:
<div class="parent">
<div class="card">
<div class="card__logo">
Logo
</div>
<div class="card__burger">
<div class="relative">Menu</div>
</div>
</div>
</div>
SCSS:
.card {
width: 90px;
height: 90px;
transition: transform 1s;
transform-style: preserve-3d;
&__logo,
&__burger {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
backface-visibility: hidden;
background: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
&__burger {
transform: rotateY(180deg);
}
}
.parent:hover {
.card {
transform: rotateY(180deg);
}
}
.relative {
position: relative;
}
Codeopen example
Update: I can reproduce this only in Chrome
I have different code but this will help you.
<style>
.flip-card {
background-color: transparent; width: 100px;
height: 100px; perspective: 1000px; margin-left:16%;
}
.flip-card-inner {
position: relative; width: 100%; height: 100%;
text-align: center; transition: transform 0.6s; transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
position: absolute; width: 100%;
height: 100%; backface-visibility: hidden;
}
.flip-card-front {
background-color: #ffffff; color: black; z-index: 2;
}
.flip-card-back {
background-color: #ffffff; color: white;
transform: rotateY(180deg); z-index: 1;
}
.coninstallbtn { margin-top: 31%; margin-left: 20%; }
</style>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
Front View
</div>
<div class="flip-card-back">
Back View
</div>
</div>
</div>
</body>
I am trying to get a scale effect when I hover over a thumb, as in this Codepen example (first thumb, the Lily effect):
http://codepen.io/intermedion/pen/BQVJEx
I modified the above example to remove the figure/figcaption, and I used a flexbox layout for the thumb grid, see this pen:
http://codepen.io/intermedion/pen/dOKrWQ?editors=1100
<!-- HTML -->
<div class="wrap">
<div class="row">
<div>
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">
</a>
</div>
<div>
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg">
</a>
</div>
</div>
</div>
/* CSS */
.row {
display: flex;
flex-flow: row wrap;
padding: 0 5px;
font-size: 0;
}
.row div {
flex: auto;
width: 160px;
margin: 6px 12px;
}
.row div img {
width: 100%;
height: auto;
}
/*** EFFECTS ***/
.row img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
}
.row img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.row:hover img {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
I tried various options, including setting sizes on the thumbs, adding figure/figcaption - the thumbs scale, but over and beyond the thumbnail size, which is not what I want.
I am starting to suspect that it may be the flexbox layout that is causing the scaling beyond the rendered thumb size, but I am not sure.
Is there any way to do the scaling within the rendered thumb with a flexbox layout?
I think you forgot overflow:hidden for the div:
.row div {
flex: auto;
width: 160px;
margin: 6px 12px;
overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ul {
list-style-type: none;
}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none;}
html {
background: #2b303b;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*** LAYOUT ***/
.wrap {
max-width: 660px;
margin: 1.5em auto 1em auto;
padding: 10px 10px;
background: #2e333f;
background-color: rgba(32, 38, 52, 0.6);
background: #242B3A;
font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 100%;
color: rgba(127, 133, 147, 0.8);
border-radius: 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
}
/*** GRID ***/
.row {
display: flex;
flex-flow: row wrap;
padding: 0 5px;
font-size: 0;
}
.row div {
flex: auto;
width: 160px;
margin: 6px 12px;
overflow: hidden;
}
.row div img {
width: 100%;
height: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/*** EFFECTS ***/
.row img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
}
.row img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.row div:hover img {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
/*** CAPTIONS ***/
/*
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 300px;
max-width: 480px;
max-height: 360px;
width: 48%;
background: #3085a3;
text-align: center;
cursor: pointer;
}
*/
/*
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
*/
<div class="wrap">
<div class="row">
<div>
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">
</a>
</div>
<div>
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg">
</a>
</div>
</div>
</div>
Can anyone help me please? I don't know how to use animate.css.
.original,
.box {
border-radius: 6px;
}
.original {
background: #eaeaed;
border: 1px dashed #cecfd5;
float: left;
margin: 12px 15px;
}
.box {
background: #2db34a;
height: 95px;
line-height: 95px;
text-align: center;
width: 95px;
}
.spin {
cursor: pointer;
transform-style: preserve-3d;
}
.spin:hover {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
<div class="original">
<div class="spin">
<div class="box box-1">Box 1</div>
</div>
</div>
I dont think that CSS have the property "slideDown".
But you can make somthing like this with CSS trnasition
http://jsbin.com/hiboyoxoha/1/edit
.wrapper {
width: 200px;
height: 100px;
background: #44f;
text-align: center;
color: #fff;
line-height: 100px;
font: 25px arial;
overflow: hidden;
position: relative;
}
.inner {
position: absolute;
height: 100px;
top: -100px;
transition: all 0.5s;
background: #444;
}
.wrapper:hover .inner {
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">hover me
<div class="inner">Hello i am new div</div>
</div>
</body>
</html>
I'm using some (seemingly) basic css inside of a bootstrap frame, and for some reason once I placed my code into bootstrap it started spazzing out and not displaying images or transforming.
If you go here on Chrome/FF/(Even IE) you can see the images load and transform on mouseover. If you load it up on Safari though it just sits there and only displays what should be the back of the card.
I've been tearing my hair out about this for hours, any advice would be greatly appreciated!
Thanks :)
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/dickshit.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="f2_container">
<div id="f2_card" class="shadow">
<div class="front face">
<img src="/cardbacks/default.png" height="359" width="241"/>
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
</div></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
My CSS is:
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
border-radius: 10px;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
#f1_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
#f2_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f2_container {
perspective: 1000;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
transform: rotateY(180deg);
}
You are using some CSS that is "not supported" by Safari. What you need to do to fix the problem is to add -webkit- in front of some of them (as specified in the W3schools pages linked below):
transform (http://www.w3schools.com/css/css3_2dtransforms.asp)
transform-style (http://www.w3schools.com/cssref/css3_pr_transform-style.asp)
transition (http://www.w3schools.com/css/css3_transitions.asp)
perspective (http://www.w3schools.com/cssref/css3_pr_perspective.asp)
backface-visibility (http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp)
Once you add the extra code in for those styles, the result will look fine in Safari too (I tested in Safari 5.1.7), and the CSS will be like this:
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-sizing: border-box;
border-radius: 10px;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
#f1_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f1_container {
perspective: 1000px;
-webkit-perspective:1000px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#f2_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f2_container {
perspective: 1000px;
-webkit-perspective: 1000px;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
try adding
.face {-webkit-backface-visibility: hidden; backface-visibility: hidden;}