Folded Video

NOTE: Please watch in latest Canary with flag "Enable experimental Web Platform features" enabled. What is a folded video How do you make a folded video? This script and codes were developed by Daniel Gooß on 14 January 2022, Friday.

How do I make an folded video?
  1. Folded Video Previews
  2. Folded Video HTML Codes
  3. Folded Video CSS Codes
Folded Video Previews

Folded Video HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Folded Video</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!--<p class="note">NOTE: Please watch in latest Canary with flag <strong>"Enable experimental Web Platform features"</strong> enabled.</p>-->
<p class="note">NOTE: Due to changes in the Google Chrome road map, the support for CSS Regions in Canary was removed, which makes this Pen unfunctional, sorry. I will update it as soon as Regions will return.</p>
<video class="source"
 src="https://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4" controls autoplay loop width="854" height="480"></video>

<div class="wrapper">
  <ul id="fold">
	  <li id="region1" class="page"> 
        <div class="region"></div>
        <div class="cover">
          <div class="frontcover">
            <h1><img src="http://upload.wikimedia.org/wikipedia/de/e/ea/Big_Buck_Bunny.svg" alt="" /></h1>
            <h2>In CSS Regions</h2>
          </div>
      </div>
	  </li>
	  <li id="region2" class="page">
	    <div class="region"></div>
	  </li>
	  <li id="region3" class="page">
	    <div class="region"></div>
      <div class="cover"></div>
	  </li>
  </ul>
</div>
  
  
</body>
</html>

Folded Video CSS Codes

@-webkit-keyframes fold-first {
  0% {
    -webkit-transform: rotateX(-180deg);
  }
  50% {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: -5px -10px 20px rgba(0, 0, 0, 0.25);
    -webkit-transform: rotateX(-10deg);
  }
}
@-webkit-keyframes fold-last {
  0% {
    -webkit-transform: rotateX(180deg);
  }
  50% {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.25);
    -webkit-transform: rotateX(10deg);
  }
}
html,
body {
  overflow: auto;
  height: 100%;
  background: linear-gradient(0deg, #0083B7 0%, #00A8E6 100%);
  color: #333;
  font-family: Arial, sans-serif;
}
.wrapper {
  margin: 100px auto;
  width: 854px;
  height: 480px;
}
.source {
  z-index: 3;
  -webkit-transform: rotateZ(90deg);
  -webkit-transform-origin: 28.1% 50%;
  -webkit-flow-into: source;
}
#fold {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 854px;
  width: 480px;
  height: 854px;
  -webkit-transform: rotateZ(-90deg);
  -webkit-transform-origin: 50% 28.1%;
  -webkit-perspective: 1400px;
}
#fold .page {
  position: relative;
  display: block;
  width: 480px;
  height: 284px;
  list-style-type: none;
  -webkit-transform-style: preserve-3d;
}
#fold .cover,
#fold .region {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
}
#fold .region {
  background-color: #000;
  -webkit-flow-from: source;
}
#fold .cover {
  background-color: #fff;
  -webkit-transform: rotateX(180deg);
}
#fold .frontcover {
  display: inline-block;
  width: 284px;
  height: 480px;
  -webkit-transform: rotateZ(90deg) translateY(-480px);
  -webkit-transform-origin: 0% 0%;
}
#fold .frontcover h1,
#fold .frontcover h2 {
  display: block;
  margin: 100px auto;
  width: 80%;
  text-align: center;
}
#fold .frontcover img {
  max-width: 100%;
}
#fold #region1 {
  z-index: 2;
  transition: -webkit-transform 2s;
  -webkit-transform: rotateX(-180deg);
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: fold-first 2s 2s both;
}
#fold #region1 .region {
  -webkit-filter: brightness(0.95);
}
#fold #region2 {
  z-index: 0;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateZ(0);
}
#fold #region3 {
  z-index: 1;
  -webkit-transform-origin: 50% 0%;
  -webkit-animation: fold-last 2s 4s both;
}
#fold #region3 .region {
  -webkit-filter: brightness(1.07);
}
.note {
  padding: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
  background-color: #fff;
  text-align: center;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.