Somebody helped me create the webpage animation in the snippet, the problem is the lines are not full width, if you notice, after 5-10 seconds you can see the cut lines not going full width. any idea what could cause this as calculations seem ok. i have another version of the script which goes full width but is built in another way, in some browsers it allocates up to 10gb of ram :D so that was a no no and we built this version of the animation which is lighter. thank you in advance
window.onload = function () {
document.querySelectorAll('.circle').forEach(function (circle, i) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', "0 0 200 200");
svg.setAttribute('preserveAspectRatio', "xMidYMid slice");
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.id = 'line' + i;
line.setAttribute('x1', "100");
line.setAttribute('x2', "100");
line.setAttribute('y1', "-300");
line.setAttribute('y2', "300");
svg.append(line);
var s = parseInt(circle.getAttribute("data-step"));
var end = 180 / s;
for (var j = 1; j < end; j++) {
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#line' + i);
use.setAttribute('transform', 'rotate(' + s * j + ', 100, 100)');
svg.append(use);
}
circle.append(svg);
});
}
body {
overflow: hidden;
}
.circle {
height: 100px;
width: 100px;
position:absolute;
}
.circle span {
text-align:center;
height:100%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
border-radius: 50%;
background-color:white;
margin:0px auto;
position:absolute;
}
.circle span:hover {
color:white;
transition: all .5s;
}
.food{
color:#0073b3;
}
.food:hover{
background-color:#0073b3;
}
.line{
color:#FBAF17;
}
.line:hover{
background-color:#FBAF17;
}
.music{
color:#F15E42;
}
.music:hover{
background-color:#F15E42;
}
.air{
color:#ED1C24;
}
.air:hover{
background-color:#ED1C24;
}
.story{
color:#3EA472;
}
.story:hover{
background-color:#3EA472;
}
.circle-food span{
width:220px;
height:220px;
left:-60%;
top:-60%;
}
.circle-story span{
width:350px;
height:350px;
left:-126%;
top:-126%;
}
.circle-line span{
width:300px;
height:300px;
left:-105px;
top:-105px;
}
.circle-air span{
width:125px;
height:125px;
top: -15px;
left: -15px;
}
.circle-music span{
width:225px;
height:225px;
top: -65px;
left: -65px;
}
svg {
opacity: 0.8;
position: absolute;
z-index: -1;
left:calc(50% - 100vw);
top:calc(50% - 100vh);
width: 200vw;
height: 200vh;
animation: animate 90s infinite linear;
transform-origin: center;
}
.circle-food svg {
stroke: #0073B3;
}
.circle-line svg {
stroke: #FBAF17;
}
.circle-music svg {
stroke: #F15E42;
}
.circle-air svg {
stroke: #ED1C24;
}
.circle-story svg {
stroke: #3EA472;
}
line {
stroke-width: 0.05;
}
#keyframes animate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="circle circle-food" style="left:30%;top:25%;" data-step="5">
<span class="food" style="font-size:35px;line-height:40px;">FOOD&<br>DRINKS</span>
</div>
<div class="circle circle-line" style="left:20%;bottom:25%;" data-step="5">
<span class="line" style="font-size:50px;">LINE-UP<br>2018</span>
</div>
<div class="circle circle-music" style="right:15%;top:20%;" data-step="5">
<span class="music" style="font-size:45px;line-height:45px;">THE<br>MUSIC</span>
</div>
<div class="circle circle-air" style="right:15%;bottom:15%;" data-step="5">
<span class="air" style="font-size:30px;">ON<br>AIR!</span>
</div>
<div class="circle circle-story" style="right:40%;bottom:40%" data-step="5">
<span class="story" style="font-size:50px;">FESTIVAL STORY</span>
</div>
it seems the width of your viewbox is too small, try to change the svg parameters in CSS:
svg {
opacity: 0.8;
position: absolute;
z-index: -1;
left: calc(50% - 200vw);
top: calc(50% - 200vh);
width: 400vw;
height: 400vh;
animation: animate 90s infinite linear;
transform-origin: center;
}
Also on a smaller viewport it works.
When I start a project like a website I also start to build up from mobile to bigger viewports/devices, it's easier to scale. There are other things on mobile I'd consider changing with this, don't know your usecase and it was not part of the question.
Related
I have started learning JS recently and am stuck here. I have created a dice game where images change themselves randomly when a button is clicked.
The images just get changed from one to another. I want to give a rolling effect to them. So, I have added animation for them that they change angles in both X-axis and Y-axis. It works on the first click but later doesn't.
So I had added classList.add() to give the animation and classList.remove() to remove but the remove function doesn't work.
This is HTML code:
function roll() {
document.querySelectorAll("img")[0].classList.add("rollEffect");
document.querySelectorAll("img")[1].classList.add("rollEffect");
var randomNumber1 = Math.floor(Math.random() * 6 + 1);
var randomNumber2 = Math.floor(Math.random() * 6 + 1);
var randomImage1 = "dice" + randomNumber1 + ".png";
var randomImage2 = "dice" + randomNumber2 + ".png";
document.querySelectorAll("img")[0].setAttribute("src", randomImage1);
document.querySelectorAll("img")[1].setAttribute("src", randomImage2);
if (randomNumber1 > randomNumber2)
document.querySelector("h1").innerHTML = "Player1 wins!!!";
else
if (randomNumber2 > randomNumber1)
document.querySelector("h1").innerHTML = "Player2 wins!!!";
else
document.querySelector("h1").innerHTML = "DRAW!!!";
document.querySelectorAll("img")[0].classList.remove("rollEffect");
document.querySelectorAll("img")[1].classList.remove("rollEffect");
}
.btn {
background-color: #8843F2;
border: 0;
border-radius: 20px;
color: #ffffff;
font-family: 'Indie Flower', cursive;
margin: 0 50px;
padding: 1% 2%;
}
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
}
#keyframes rollClick {
9% {
transform: rotateX(30deg) rotateY(30deg)
}
18% {
transform: rotateX(60deg) rotateY(60deg)
}
28% {
transform: rotateX(90deg) rotateY(90deg)
}
37% {
transform: rotateX(120deg) rotateY(120deg)
}
46% {
transform: rotateX(150deg) rotateY(150deg)
}
55% {
transform: rotateX(180deg) rotateY(180deg)
}
65% {
transform: rotateX(210deg) rotateY(210deg)
}
76% {
transform: rotateX(240deg) rotateY(240deg)
}
85% {
transform: rotateX(270deg) rotateY(270deg)
}
90% {
transform: rotateX(300deg) rotateY(300deg)
}
95% {
transform: rotateX(330deg) rotateY(330deg)
}
100% {
transform: rotateX(360deg) rotateY(360deg)
}
}
.rollEffect {
animation-name: rollClick;
animation-duration: 0.1s;
}
body {
background-color: #F9D371;
}
img {
width: 80%;
}
<div class="container">
<h1>Roll us</h1>
<div class="dice">
<p>Player 1</p>
<img class="img1" src="dice6.png">
</div>
<div class="dice">
<p>Player 2</p>
<img class="img2" src="dice6.png">
</div>
<button class="btn" onclick="roll()">Roll</button>
</div>
The javascript code that adds the rolling animation class runs separate from any animation durations.
It will run as quickly as the performance of the device allows.
In your js code it will:
add the .rollEffect class to both images.
set a new image url.
set text with the result of the game
remove the .rollEffect class from both images.
This all happens as fast as possible, we're talking micro/nano seconds.
So the animation does get applied, each time, and gets removed each time. so fast you can't even see the animation.
You have to wait a bit before removing the animation class. so the animation has time to run before it's removed.
This can be achived with setTimeout
For example:
setTimeout(() => {
document.querySelectorAll("img")[0].classList.remove("rollEffect");
document.querySelectorAll("img")[1].classList.remove("rollEffect");
}, 100); // <--- 100 here will execute the code in the callback after 100ms, the same as the animation time.
function roll() {
document.querySelectorAll("img")[0].classList.add("rollEffect");
document.querySelectorAll("img")[1].classList.add("rollEffect");
var randomNumber1 = Math.floor(Math.random() * 6 + 1);
var randomNumber2 = Math.floor(Math.random() * 6 + 1);
var randomImage1 = `http://placekitten.com/g/${50*randomNumber1}/300`;
var randomImage2 = `http://placekitten.com/g/200/${50*randomNumber2}`;
document.querySelectorAll("img")[0].setAttribute("src", randomImage1);
document.querySelectorAll("img")[1].setAttribute("src", randomImage2);
if (randomNumber1 > randomNumber2)
document.querySelector("h1").innerHTML = "Player1 wins!!!";
else
if (randomNumber2 > randomNumber1)
document.querySelector("h1").innerHTML = "Player2 wins!!!";
else
document.querySelector("h1").innerHTML = "DRAW!!!";
setTimeout(() => {
document.querySelectorAll("img")[0].classList.remove("rollEffect");
document.querySelectorAll("img")[1].classList.remove("rollEffect");
}, 100);
}
.btn {
background-color: #8843F2;
border: 0;
border-radius: 20px;
color: #ffffff;
font-family: 'Indie Flower', cursive;
margin: 0 50px;
padding: 1% 2%;
}
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
}
#keyframes rollClick {
9% {
transform: rotateX(30deg) rotateY(30deg)
}
18% {
transform: rotateX(60deg) rotateY(60deg)
}
28% {
transform: rotateX(90deg) rotateY(90deg)
}
37% {
transform: rotateX(120deg) rotateY(120deg)
}
46% {
transform: rotateX(150deg) rotateY(150deg)
}
55% {
transform: rotateX(180deg) rotateY(180deg)
}
65% {
transform: rotateX(210deg) rotateY(210deg)
}
76% {
transform: rotateX(240deg) rotateY(240deg)
}
85% {
transform: rotateX(270deg) rotateY(270deg)
}
90% {
transform: rotateX(300deg) rotateY(300deg)
}
95% {
transform: rotateX(330deg) rotateY(330deg)
}
100% {
transform: rotateX(360deg) rotateY(360deg)
}
}
.rollEffect {
animation-name: rollClick;
animation-duration: 0.1s;
}
body {
background-color: #F9D371;
}
img {
width: 150px;
height: 150px;
}
<div class="container">
<h1>Roll us</h1>
<div class="dice">
<p>Player 1</p>
<img class="img1" src="http://placekitten.com/g/200/300">
</div>
<div class="dice">
<p>Player 2</p>
<img class="img2" src="http://placekitten.com/g/300/200">
</div>
<button class="btn" onclick="roll()">Roll</button>
</div>
I'm trying to rotate 4 children (.feat) elements within a circle 90 degrees every 3 seconds using a CSS custom property called --angle, but it doesn't seem to work as expected:
function rotation() {
let inner = document.querySelector('[inn]');
let rota = inner.style.transform;
}
setInterval(rotation, 3000);
.feat-cont {
width: 60vmax;
height: 60vmax;
}
.feat-cont p {
display: inline-block;
}
.inner {
--angle: 0;
position: relative;
background-color: yellow;
transform: rotate(var(--angle) * 1deg);
width: 100%;
height: 100%;
border-radius: 50%;
}
.feat {
position: absolute;
}
.feat1 {
left: 25vmax;
}
.feat2 {
left: 50vmax;
top: 25vmax;
}
.feat3 {
left: 25vmax;
top: 50vmax;
}
.feat4 {
top: 25vmax;
}
<div class='feat-cont'>
<div class='inner' inn>
<div class='feat feat1' f1>
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
<p>Fast Performance</p>
</div>
<div class='feat feat2' f2>
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
<p>64 GBs of memory</p>
</div>
<div class='feat feat3' f3>
<img src="https://img.icons8.com/nolan/64/camera.png"/>
<p>3K MP camera</p>
</div>
<div class='feat feat4' f4>
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
<p>Trusted brand</p>
</div>
</div>
</div>
You can change the angle CSS custom property using CSSStyleDeclaration.setProperty():
circle.style.setProperty('--angle', `${ angle }deg`);
Also, note you use it as transform: rotate(var(--angle)), not as rotate(var(--angle) * 1deg), so the unit should already be included in the CSS property.
If you don't want to use CSS properties, you can change the style attribute directly:
circle.style.transform = `rotate(${ angle }deg)`;
However, I guess you need to rotate the circle in one direction while rotating all the children (.feat) in the opposite direction to keep them straight, so using CSS properties is probably more convenient, as otherwise, you would have to change the style attribute in all 4 children:
const circle = document.querySelector('.circle');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const step = 90;
let angle = 0;
let intervalID = null;
function updateRotation() {
circle.style.setProperty('--angle', `${ angle }deg`);
circle.style.setProperty('--angle-inverse', `${ -angle }deg`);
}
function autoRotate() {
intervalID = setInterval(() => {
angle += step;
updateRotation();
}, 3000);
}
prev.onclick = () => {
clearInterval(intervalID);
angle -= step;
updateRotation();
autoRotate();
};
next.onclick = () => {
clearInterval(intervalID);
angle += step;
updateRotation();
autoRotate();
};
autoRotate();
body {
font-family: monospace;
}
.container {
width: 60vmax;
height: 60vmax;
margin: 0 auto;
overflow: hidden;
}
.circle {
--angle: 0;
--angle-inverse: 0;
position: relative;
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform linear 1s;
transform: rotate(var(--angle));
}
.feat {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20vmax;
height: 20vmax;
text-align: center;
transition: transform linear 1s;
}
.feat > img {
width: 10vmax;
height: 10vmax;
}
.feat > p {
margin: 8px 0 0;
}
.feat1 {
top: 0;
left: 50%;
transform: translate(-50%, 0) rotate(var(--angle-inverse));
}
.feat2 {
right: 0;
top: 50%;
transform: translate(0, -50%) rotate(var(--angle-inverse));
}
.feat3 {
bottom: 0;
left: 50%;
transform: translate(-50%, 0) rotate(var(--angle-inverse));
}
.feat4 {
left: 0;
top: 50%;
transform: translate(0, -50%) rotate(var(--angle-inverse));
}
.button {
position: fixed;
top: 0;
bottom: 0;
background: transparent;
border: 0;
padding: 32px;
outline: none;
font-family: monospace;
font-size: 32px;
}
.button:hover {
background: rgba(0, 0, 0, .0625);
}
.prev {
left: 0;
}
.next {
right: 0;
}
<div class="container">
<button class="button prev">‹</button>
<div class="circle">
<div class="feat feat1">
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
<p>Fast Performance</p>
</div>
<div class="feat feat2">
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
<p>64 GBs of memory</p>
</div>
<div class="feat feat3">
<img src="https://img.icons8.com/nolan/64/camera.png"/>
<p>3K MP camera</p>
</div>
<div class="feat feat4">
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
<p>Trusted brand</p>
</div>
</div>
<button class="button next">›</button>
</div>
I have added a pure CSS solution, You might not need javascript manipulations at all, it's lightweight too.
Just use CSS inbuilt Animation property.
.inner{animation: rotate 12s infinite;}
#keyframes rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(90deg);}
50%{transform: rotate(180deg);}
75%{transform: rotate(270deg);}
100%{transform: rotate(360deg);}
}
Find the codepen here
.feat-cont {
width: 60vmax;
height: 60vmax;
}
.feat-cont p {
display: inline-block;
}
.inner {
position: relative;
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 50%;
}
.feat {
position: absolute;
}
.feat1 {
left: 25vmax;
}
.feat2 {
left: 50vmax;
top: 25vmax;
}
.feat3 {
left: 25vmax;
top: 50vmax;
}
.feat4 {
top: 25vmax;
}
.inner {
animation: rotate 12s infinite;
}
#keyframes rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(90deg);}
50%{transform: rotate(180deg);}
75%{transform: rotate(270deg);}
100%{transform: rotate(360deg);}
}
#keyframes r-rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(-90deg);}
50%{transform: rotate(-180deg);}
75%{transform: rotate(-270deg);}
100%{transform: rotate(-360deg);}
}
.feat {
animation: r-rotate 12s infinite;
}
<nav></nav>
<main>
<section>
<div class='feat-cont'>
<div class='inner' inn>
<div class='feat feat1' f1>
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/><br><p>Fast Performance</p>
</div>
<div class='feat feat2' f2>
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/><br><p>64 GBs of memory</p>
</div>
<div class='feat feat3' f3>
<img src="https://img.icons8.com/nolan/64/camera.png"/><br><p>3K MP camera</p>
</div>
<div class='feat feat4' f4>
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/><br><p>Trusted brand</p>
</div>
</div>
</div>
</section>
<section class='ndsection'>
</main>
Update Your javascript Code
setInterval(rotation, 3000);
var deg = 90;
let inner = document.querySelector('.inner');
function rotation() {
inner.style.transform='rotate('+deg+'deg)';
}
I have some code that displays 4 divs at a random hight at specified distances from the viewport sides, each div appears with a different delay speed and then moves around the page at random.
I want to add a delay to the movement of each div so they don't all start and stop moving at the same time but every time I add ad .delay() it breaks. Any help?
Thanks
HTML
<div class="content">
<div class="loopbox">
<div id="rand_pos" class="loop mobile box1">L</div>
<div id="rand_pos" class="loop mobile box2">O</div>
<div id="rand_pos" class="loop mobile box3">O</div>
<div id="rand_pos" class="loop mobile box4">P</div>
</div>
<div class="info">
<h1>COMING SOON</h1>
<p>info#loopstudio.uk</p>
</div>
</div>
*CSS
#import url('https://fonts.googleapis.com/css?family=Marcellus&display=swap');
*:focus {
outline: none;
}
html { overflow: hidden; }
body {
margin: 0;
background-color:#FFF9F3;
}
p,h1 {
font-family:sans-serif;
}
h1{
font-weight:100;
}
.loop {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size:22vw;
font-family:'Marcellus', serif;
font-weight:100;
color: black;
position: absolute;
}
.loop:hover {
animation: shake 0.82s cubic-bezier(.5,.01,.01,.05) 1;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
.box1{
top:10vh;
left:8vw;
display:none;
}
.box2{
top:20vh;
left:30vw;
display:none;
}
.box3{
top:30vh;
right:35vw;
display:none;
}
.box4{
top:40vh;
right:10vw;
display:none;
}
.content {
position: relative;
height: 100vh;
width: 100vw;
margin: 0 auto;
resize: both;
}
.info {
width: 100%;
height:auto;
transform: translate(-50%, -50%);
position: fixed;
top: 50%;
left: 50%;
resize: both;
text-align:center;
z-index:-1000;
}
JS
$('document').ready(function(){
$('.box1').delay(500).fadeIn(850);
$('.box2').delay(1000).fadeIn(850);
$('.box3').delay(750).fadeIn(850);
$('.box4').delay(1250).fadeIn(850);
});
$('document').ready(function() {
var bodyHeight = document.body.clientHeight;
var randPosY = Math.floor((Math.random()*bodyHeight));
$('#rand_pos').css('top', randPosY);
});
$(document).ready(function(){
animateDiv('.box1');
animateDiv('.box2');
animateDiv('.box3');
animateDiv('.box4');
});
function makeNewPosition(){
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(myclass){
var newq = makeNewPosition();
$(myclass).animate({ top: newq[0], left: newq[1] }, 8000, function(){
animateDiv(myclass);
});
};
I have two problems:
Animation issue(moving while scrolling):
My HTML:
<body>
<header class="stable">
<div id="object">
<img src="img/object.png">
</div>
</header>
</body>
My CSS:
#object{
position: absolute;
left: 0;
right: 0;
margin:auto;
bottom: 0%;
width: 45.9%;
height: auto;
animation: animation 1s ease-out;
z-index: 99;
}
#keyframes animation{
from{
left: -200%;
}
}
My JS:
var object = document.querySelector('#object');
window.addEventListener('scroll', function() {
var s = $(document).scrollTop();
var percent_from_top = s/this.innerHeight;
if(0 <= percent_from_top <= 1){
object.style.left = 150*(percent_from_top)+'%';
object.style.transition = "0.75s linear";
}
});
Problem with strip:
My HTML:
<section id="first_section">
<div class="strip"></div>
</section>
My CSS:
#first_section > .strip{
left: 0%;
right:0;
margin: auto;
margin-top:-30%;
width: 40%;
height: 130%;
transform: rotate(70deg);
background: rgba(0,0,0, 0.9);
}
It all works...
but it doesn't seem effective enough, because
it slows down, and
it partially appears
I tried to use clip-path for example, but it works the same way.
Is there a way to create a page more "evenly"?
Since Last 2 days I am trying to achieve smooth hotspot focus but i am not able to achieve it.
please click on below link and click on panorama icon,you will get an idea what i am saying.
http://ggnome.com/samples/pano2vr_5/tower/
PS: I have used http://threejs.org/examples/webgl_panorama_equirectangular.html panorama to achieve desired functionality.
Can anyone help me with this please...
You either have to create a 3d object in your scene and make it clickable or add a second threejs renderer, this time it will be a css3drenderer, basically it allows to have html elements in your threejs world. Place the camera in the middle of a cube made by html/css elements:
http://mrdoob.com/lab/javascript/threejs/css3d/
or go completely with css, something like:
$('body').on('click', function(e) {
console.log('clicked on .cube. New transform: ');
var newTransform = "translateZ(800px) rotateX("+Math.round(Math.random() * 360)+"deg) rotateY("+Math.round(Math.random() * 360)+"deg) rotateZ("+0+"deg)";
console.log(newTransform)
$('.cube').css({
"transform": newTransform,
"-webkit-transform": newTransform,
})
});
$('video').on('ended', function () {
console.log('ended')
this.load();
this.play();
});
var mousedown = true;
/*$(document).on('mousedown', function() {
mousedown = true;
})
$(document).on('mouseup', function() {
mousedown = false;
})*/
$(document).on('mousemove', function(e) {
if (mousedown) {
var posx = e.clientX;
var posy = e.clientY;
var startposx = 0;
var startposy = 0;
var newTransform = "translateZ(800px) rotateX("+ (startposx + posy * -1) +"deg) rotateY("+ (startposy + posx) +"deg) rotateZ("+0+"deg)";
$('.cube').css({
"transform": newTransform,
"-webkit-transform": newTransform,
})
/*
startposx = posx;
startposy = posy;
*/
}
})
/* scene wrapper */
.wrapper{
height: 300px;
margin-top:50px;
position:relative;
perspective: 800;
-webkit-perspective: 1600;
-moz-perspective: 800;
perspective-origin: 50% 1000px;
-webkit-perspective-origin: 50% 1000px;
-moz-perspective-origin: 50% 1000px;
}
/* cube wrapper */
.cube{
position: relative;
margin: 0 auto;
width: 2000px;
transform-style: preserve-3d;
transform: translateZ(1000px) rotateX(0deg) rotateY(10deg) rotateZ(0);
transform-origin: 1000px 1000px;
-webkit-transform-origin: 1000px 1000px;
-moz-transform-origin: 1000px 1000px;
/*transition: all 1000ms ease-in-out;*/
}
/* outer cube */
b{
position:absolute;
width:2000px;
height:2000px;
display:block;
background:rgba(255,255,255,0.1);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
font-size:20px;
text-align:center;
line-height:2000px;
color:rgba(0,0,0,0.5);
font-family:sans-serif;
text-transform:uppercase;
/*transition: all 1s linear;*/
}
b video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 2000px;
height: 2000px;
background: black;
}
b img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 2000px;
height: 2000px;
}
b.back{
transform: translateZ(-1000px) rotateY(180deg);
}
b.right{
transform:rotateY(90deg) translateX(1000px);
transform-origin: top right;
}
b.left{
transform:rotateY(270deg) translateX(-1000px);
transform-origin: center left;
}
b.top{
transform:rotateX(90deg) translateY(-1000px);
transform-origin: top center;
}
b.bottom{
transform:rotateX(-90deg) translateY(1000px);
transform-origin: bottom center;
}
b.front{
transform: rotateX(0deg) translateZ(1000px);
}
b p {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
z-index: 9;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="cube">
<b class="front">
<video id="sourcevid" autoplay loop controls>
<source src="video/BigBuckBunny_640x360.mp4" type="video/mp4">
<source src="video/BigBuckBunny_640x360.ogv" type="video/ogg">
</video>
<p class="face">FRONT</p>
</b>
<b class="back">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">BACK</p>
</b>
<b class="top">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">TOP</p>
</b>
<b class="bottom">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">BOTTOM</p>
</b>
<b class="left">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">LEFT</p>
</b>
<b class="right">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">RIGHT</p>
</b>
</div>
</div>