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;}
Related
could you please maybe take a look into this?
I have this code:
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<div class="obrazek"></div>
</div>
</body>
</html>
CSS:
.header {
width: 800px;
height: 500px;
background-color: rgb(218, 124, 124);
overflow: hidden;
position: relative;
display: flex;
}
.obrazek {
display: flex;
padding: 25px;
width: 100%;
background-image: url(https://images.unsplash.com/photo-1667857399206-dc6d15189adc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: top 0.3s ease-out, right 0.3s ease-out, bottom 0.3s ease-out,
left 0.3s ease-out;
}
.obrazek:hover {
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
}
Codepen:
Codepen link
I want this picture to be smaller on hover. It is working but only for top, bottom and left but the right side is staying the same (I mean it doesn't change its position on hover on the right edge).
Do you have maybe any idea how to fix this and what I did wrong?
Thank you in advance!
Try this:
.header {
width: 800px;
height: 500px;
background-color: rgb(218, 124, 124);
overflow: hidden;
position: relative;
display: flex;
}
.obrazek {
display: flex;
padding: 25px;
width: 100%;
background-image: url(https://images.unsplash.com/photo-1667857399206-dc6d15189adc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
background-size: cover;
transition: 0.3s ease-out;
}
.obrazek:hover {
-ms-transform: scale(0.94, 0.9); /* IE 9 */
-webkit-transform: scale(0.94, 0.9); /* Safari 3-8 */
transform: scale(0.94, 0.9);
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<div class="obrazek"></div>
</div>
</body>
</html>
So basically I was trying to make a javascript game in HTML (I'm good at HTML but not other languages so I was confused when this problem happened)
so I made sure the syntax was correct, it was. and then did some search on the internet but it didn't help the animation just won't display. I tried many times but it just. won't
so here is the HTML code if you wanted to check it.
#game {
width: 500px;
height: 200px;
border: 1px solid;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s is infinite;
}
#keyframes block {
0% {
left: 480px;
}
100% {
left: 40px;
}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
so yeah. thanks in advance
Although you say you have checked the syntax is correct, there should be an 'invalid property value' showing in your devtools on the css for setting the animation for #brick.
It has an 'is' in it. Maybe you meant 1s or maybe you didn't intend for it to be there?
Here's the snippet without it:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
<style>
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
</style>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
Incidentally, you will probably find it more efficient (of processor) to use transform translateX rather than reset left position in an animation.
change different animation properties then it work. like animation-name: block; animation-duration: 5s; animation-iteration-count: infinite;
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left:0;
animation-name: block;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
your code had a bit problem that was the use of "is" in your animation property
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>
I've already done a question about transition, but this time I have to do something a lot harder, and I have got one more time a problem with transition, honestly I have no idea about why it won't work, anyway.
I made some king a "bar", anyway something like an interface, basically is button with a plus. When you hover the pointer on the button, it will go up and show other element, with the transition.
When I hover out the transition work only for the button with the plus (trigger1) but not for the other hyperlink. Why?
Here the code:
html
<html>
<head>
<title>Web Interface Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/interface.css" />
</head>
<body>
<div class="trigger">
<div class="div">
<center>
<span class="text">+</span>
</center>
</div>
<a class="element" href="#"></a>
<a class="element2" href="#"></a>
<a class="element3" href="#"></a>
</div>
</body>
</html>
And CSS:
.div {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: black;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 5;
border-radius: 50%;
visibility: visible;
}
.trigger:hover .div {
transform: translate(0px, -200px) rotate(45deg);
}
.trigger {
width: 50px;
height: 50px;
background: red;
position: absolute;
bottom: 5%;
right: 5%;
position: fixed;
z-index: 4;
border-radius: 50%
}
.element {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: indigo;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element {
transform: translate(0px, -50px);
visibility: visible;
}
.element2 {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: yellow;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element2 {
transform: translate(0px, -100px);
visibility: visible;
}
.element3 {
width: 50px;
height: 50px;
bottom: 5%;
right: 5%;
background: blue;
transition: transform 300ms ease-in-out;
position: fixed;
z-index: 3;
visibility: hidden;
border-radius: 50%;
}
.trigger:hover .element3 {
transform: translate(0px, -150px);
visibility: visible;
}
.text {
color: white;
font-size: 40px;
top:
}
Thank's a lot for the help!
This is because you set visibility: hidden on the elements when your .trigger element is not being hovered. It looks like they're not transitioning, but in reality, they're just disappearing.
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>