I am trying to create a rotating dice using just html and css i have the cube shape and it does rotate 45deg to the left on mouseover. this is my first experience with 3d css animations. i was following a tutorial but the code wasn't explained.
css code:
#container{
perspective:800;
perspective-orign:50% 110px;
-webkit-perspective:800;
-webkit-perspective-orign:50% 110px;
}
#cube{
position:relative;
margin:0 auto;
height:400px;
-webkit-transform:-webkit-transform 8s linear;
-webkit-transform-style: preserve-3d;
-webkit-transform:rotateY(-45deg);
}
#cube:hover{
-webkit-transform:rotateY(360deg);
-webkit-transform:rotateX(360deg);
}
#keyfremes myRotate{
from{left:100;}
to{left:100;}
}
.face{
position:absolute;
height:360px;
width:360px;
padding:20px;
background-color:rgba(50 ,50 ,50 , 0.7)
}
#cube .f1{
-webkit-transform:rotateX(90deg) translateZ(200px);
}
#cube .f2{
-webkit-transform:translateZ(200px);
}
#cube .f3{
-webkit-transform:rotateY(90deg) translateZ(200px);
}
#cube .f4{
-webkit-transform:rotateY(180deg) translateZ(200px);
}
#cube .f5{
-webkit-transform:rotateY(90deg) translateZ(200px);
}
#cube .f6{
-webkit-transform:rotateX(90deg) translateZ(200px) rotate(180deg);
}
HTML
<body>
<div id="container">
<div id="cube">
<img src="images/1.png" class="face f1" />
<img src="images/2.png" class="face f2" />
<img src="images/3.png" class="face f3" />
<img src="images/4.png" class="face f4" />
<img src="images/5.png" class="face f5" />
<img src="images/6.png" class="face f6" />
</div><!--close cube-->
</div><!--close container-->
</body>
Any help would be appricated
Related
When hovering the image ,image moves to the left,I want it to stay at the new position where it moved to, while moving the pointer away.
Thanks in advance
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
#twit:hover .move{
transform: translate(-350px,0) rotate(-360deg);
transition:all 2s linear;
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
What you want can be achieve, but you need to remove your :hover selector and use that as css animation. Another way is using jQuery mouseenter event.
Using CSS animation and removing hover selector.
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
.move{
-webkit-animation:mv 2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes mv{
from{
transform: translate(0,0) rotate(0deg);
}
to{
transform: translate(-350px,0) rotate(-360deg);
}
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
Another way is using jQuery mouseenter event, which performs same css animation, but stop your element at new position.
$(document).ready(function(){
$("#twit").on("mouseenter",function(){
$("#twit > .object").addClass("nwmv");
});
});
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
.nwmv{
-webkit-animation:mvv 2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes mvv{
from{
transform: translate(0,0) rotate(0deg);
}
to{
transform: translate(-350px,0) rotate(-360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
Using Javascript,
var b = document.getElementById("twit");
b.onmouseenter = function mv(){
var a = document.querySelector(".move");
a.style.transition = "2s ease";
a.style.transform = "translate(-350px,0) rotate(-360deg)";
}
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
I like pretty much the slow auto zoom in and out effect on that site : http://watchingtheworldcup.com/ for banner images such as the very top one.
I tired to replicate it, by looking at developer tools wihtin browser, but have some trouble implementing it as in developper tool some mentions are stroked etc.
here is my html :
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="#">
<article class="article_container">
<img class="article_image_hompage5" src="#">
<h2 class="article_title_hompage3"> a favourite thai soup</h2>
</article>
</a>
</div>
</div>
and my css for the image :
.article_image_hompage5{
width: 100%;
border-radius: 2px 2px 2px 2px;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:15px;
z-index:0;
}
Can someone help with with finding the right css settings ?
cheers,
Use css animation you can get the similar result.
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1,1);
}
to {
-webkit-transform: scale(1.5,1.5);
}
}
/* Standard syntax */
#keyframes zoom {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}
img {
-webkit-animation: zoom 50s; /* Chrome, Safari, Opera */
animation: zoom 50s;
}
<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />
If you want to also zoom out you need to define the the milestones in your keyframes as such:
#-webkit-keyframes zoominout {
0% {
-webkit-transform: scale(1,1);
}
50% {
-webkit-transform: scale(1.5,1.5);
}
100% {
-webkit-transform: scale(1.1,1.1);
}
}
Use css transform:scale();
like:
JavaScript:
window.onload=function(){
$("#content").fadeOut(4000);
$("#background").addClass("zoom");
setTimeout(function(){
$("#background").removeClass("zoom");
},5000);
}
body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#background{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:url("http://watchingtheworldcup.com/photos/worldcup1.jpg") center center no-repeat;
background-size: 100% 100%;
display:inline-block;
z-index:2;
transition:all ease 4.1s;
/* transform:scale(1,1);*/
}
#content{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:3;
background-color:rgba(0,0,0,0.5);
color:#ffffff;
font-size:50px;
}
.zoom{
transform:scale(1.2,1.2);
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="background">
</div>
<div id="content">
<center><br /><br /><br /><br /><br /><br />
Watching...
</center>
</div>
I have five buttons in the UI with their respective inner box shadows. I want them to rotate individually when hovered upon. Now when I hover over one even the adjacent button is also rotating accordingly . And also the inner shadow should make a smooth transition inside the buttons ? Why is not that happening? Where am I mistaken?
http://jsfiddle.net/EP3Ps/
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
//
}
.shadow_div
{
//
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
//
}
.Next_Class
{
//
}
.Prev_Class
{
//
}
ul.Round_Buttons
{
position:relative;
left:40%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:#d1bfbf;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border-style:solid;
cursor:pointer;
box-shadow:inset 1px 1px 1px 1px #f00;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
ul.Round_Buttons li:hover
{
transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
}
#-webkit-keyframes rotate
{
from
{
transform : rotate(0deg);
}
to
{
transform :rotate(-360deg);
}
}
#keyframes rotate
{
from
{
transform: rotate(0deg);
}
to
{
transform: rotate(-360deg);
}
}
</style>
<script type="text/javascript">
//
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1st_Round">1</li>
<li id="2nd_Round">2</li>
<li id="3rd_Round">3</li>
<li id="4th_Round">4</li>
<li id="5th_Round">5</li>
</ul>
</div>
</body>
</html>
You are using keyframes not correctly.
Also, to make shadows changed you should add rule for new shadow on :hover.
It should be something like this:
ul.Round_Buttons li:hover
{
animation:rotate 1s;
-webkit-animation:rotate 1s;
-moz-animation:rotate 1s;
box-shadow:inset 1px 1px 1px 10px #f00;
}
see updated fiddle
Sorry If my tone is not good,
I am using this code in a web page.
HTML:
<a class="second" href="#nav1">Home</a>
<a class="second" href="#nav2">About</a>
<a class="second" href="#nav3">Contact</a>
<section id="nav1" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
<section id="nav2" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
<section id="nav3" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
Question: my question is this, When I click on link "About" of "Contact", page should scroll slowly slowly .
NOTE:(Here I mean Parallax Scrolling).
suggest me css for this.
You're gonna have to modify your HTML. I passed across a solution some time ago but I don't remember where it is. Anyway here's how I'd modify your code:
HTML:
<a id="nav1"></a>
<a id="nav2"></a>
<a id="nav3"></a>
<header class="nav">
<nav>
<ul>
<li>Home </li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="main">
<article class="article" id="nav1">
<p>Big Tech Ideas Page3</p>
</article>
<article class="article" id="nav2">
<p>Big Tech Ideas Page3</p>
</article>
<article class="article" id="contacto">
<p>Big Tech Ideas Page3</p>
</article>
</section>
CSS:
a[id= "nav1"]:target ~ #main article.article {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[id= "nav2"]:target ~ #main article.article {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "nav3"]:target ~ #main article.article {
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
}
header {
position: fixed;
z-index: 10;
}
.article {
width: 100%;
height: 600px;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.article p {
font-family: sans-serif;
font-size: 86px;
font-size: 5rem;
position:relative;
line-height: 300px;
text-align: center;
margin: 0;
}
Let me know if it works.
Working demo fiddle: http://jsfiddle.net/Fraximus/CFSEK/1/
Is there any way to produce reverse-parallax scrolling?
i.e. On scrolling the content down, I want the respective title in the left pane to get highlighted accordingly.
I currently have the following HTML and CSS which creates the effect of flipping between the content of two divs.
How I can expand on this to flip between 4 (or more) divs?
I was thinking either of these approaches might be the way forward but I'm not sure how to implement them!
pause the animations at rotateX(90deg) then start a second set of animations;
or change the content of the divs when they are at rotateX(90deg).
HTML
<div class="flip1">
FLIP 1<br />
FLIP 1<br />
FLIP 1<br />
FLIP 1<br />
</div>
<div class="flip2">
FLIP 2<br />
FLIP 2<br />
FLIP 2<br />
FLIP 2<br />
</div>
CSS
div {
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:linear;
-webkit-backface-visibility: hidden;
color: blue;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
padding: 20px;
position: absolute;
}
#-webkit-keyframes flip1 {
from { -webkit-transform: rotateX(0deg); }
to { -webkit-transform: rotateX(360deg); }
}
div.flip1 {
-webkit-animation-name: flip1;
}
#-webkit-keyframes flip2 {
from { -webkit-transform: rotateX(-180deg); }
to { -webkit-transform: rotateX(180deg); }
}
div.flip2 {
-webkit-animation-name: flip2;
}
I got there in the end with a touch of JavaScript.
The HTML was:
<div class="flippable" id="flip1">
FLIP 1<br />
FLIP 1<br />
FLIP 1<br />
FLIP 1<br />
</div>
<div class="flippable" id="flip2">
FLIP 2<br />
FLIP 2<br />
FLIP 2<br />
FLIP 2<br />
</div>
<div class="flippable" id="flip3">
FLIP 3<br />
FLIP 3<br />
FLIP 3<br />
FLIP 3<br />
</div>
<div class="flippable" id="flip4">
FLIP 4<br />
FLIP 4<br />
FLIP 4<br />
FLIP 4<br />
</div>
<script>
$(document).ready(function() {
flip_flippables();
setInterval(flip_flippables, $('.flippable').length*2000);
function flip_flippables(){
$('.flippable').each(function(index) {
setTimeout(function(thisObj) { thisObj.addClass("flippedforward"); }, index*2000, $(this));
$(this).removeClass("flippedforward");
});
}
});
</script>
The CSS was:
.flippable {
-webkit-transform: rotateX(-90deg);
color: blue;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
padding: 20px;
position: absolute;
}
.flippedforward {
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: flip;
-webkit-transform: rotateX(90deg);
}
#-webkit-keyframes flip {
0% { -webkit-transform: rotateX(-90deg); }
25% { -webkit-transform: rotateX(0deg); }
75% { -webkit-transform: rotateX(0deg); }
100% { -webkit-transform: rotateX(90deg); }
}