pietruszka
4/16/2017 - 10:37 AM

CSS Transition // source https://jsbin.com/bamijex

CSS Transition

// source https://jsbin.com/bamijex

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS Transition</title>
<style id="jsbin-css">
.box{
  background-color: red;
  width: 100px;
  height: 100px;
  transition: background-color 3s, width 5s, transform 4s ease;
  
}

.box:hover{
  background-color: blue;
  width: 200px;
  transform: rotate(360deg) translate(300px,100px);
  //translateX();
}

.box3d{
  width: 100px;
  height: 100px;
  background-color: green;
  transition: transform 3s;
  
}

.box3d:hover{
  transform: rotateX(180deg) rotateY(100deg);
}
</style>
</head>
<body>
  <div class="box"></div>
  <div class="box3d">tekst</div>


<script id="jsbin-source-css" type="text/css">.box{
  background-color: red;
  width: 100px;
  height: 100px;
  transition: background-color 3s, width 5s, transform 4s ease;
  
}

.box:hover{
  background-color: blue;
  width: 200px;
  transform: rotate(360deg) translate(300px,100px);
  //translateX();
}

.box3d{
  width: 100px;
  height: 100px;
  background-color: green;
  transition: transform 3s;
  
}

.box3d:hover{
  transform: rotateX(180deg) rotateY(100deg);
}</script>
</body>
</html>
jsbin.bamijex.css
content_copyfile_download
.box{
  background-color: red;
  width: 100px;
  height: 100px;
  transition: background-color 3s, width 5s, transform 4s ease;
  
}

.box:hover{
  background-color: blue;
  width: 200px;
  transform: rotate(360deg) translate(300px,100px);
  //translateX();
}

.box3d{
  width: 100px;
  height: 100px;
  background-color: green;
  transition: transform 3s;
  
}

.box3d:hover{
  transform: rotateX(180deg) rotateY(100deg);
}