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>
Related
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"?
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.
I'm making a mobile app, and a part of it is being able to throw dice.
I'm working with Ionic as mobile framework and using angular and jquery to make the dice roll. The problem is when i roll multiple dice, that these dice can appear on the same spot, so basicly overlap eachother. I tried working with the jquery offset() and position() and then saying the left value of the dice can never be the same, that way the dice will always appear in another 'column'.
but somehow this didn't work because it registered the position before rolling, and not after rolling.
Here is my code:
dice.html
<ion-view view-title="dice" id="dice">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content id="dice" scroll="true">
<button class="btn orange" id="addDie1" type="button"><span>Add second die</span></button>
<button class="btn red" id="addDie2" type="button"><span>Add third die</span></button>
<section id="roll-wrap">
<div id="die" style="transform: rotateX(0deg) rotateY(0deg);">
<div class="sf f1">1</div>
<div class="sf f2">2</div>
<div class="sf f3">3</div>
<div class="sf f4">4</div>
<div class="sf f5">5</div>
<div class="sf f6">6</div>
</div>
<div id="die2" style="transform: rotateX(0deg) rotateY(90deg);">
<div class="sf f1">1</div>
<div class="sf f2">2</div>
<div class="sf f3">3</div>
<div class="sf f4">4</div>
<div class="sf f5">5</div>
<div class="sf f6">6</div>
</div>
<div id="die3" style="transform: rotateX(0deg) rotateY(180deg);">
<div class="sf f1">1</div>
<div class="sf f2">2</div>
<div class="sf f3">3</div>
<div class="sf f4">4</div>
<div class="sf f5">5</div>
<div class="sf f6">6</div>
</div>
</section>
<button class="btn orange" id="play" type="button"><span>Roll it</span></button>
</ion-content>
</ion-view>
controllers.js
.controller('DiceCtrl', function($scope) {
(function($, self){
if(!$ || !self) {
return;
}
for(var i=0; i<self.properties.length; i++) {
var property = self.properties[i],
camelCased = StyleFix.camelCase(property),
PrefixCamelCased = self.prefixProperty(property, true);
$.cssProps[camelCased] = PrefixCamelCased;
}
})(window.jQuery, window.PrefixFree);
//Actual code for Play Action , still buggy for 2 dice stacking on top of eachother
$(function(){
$("#addDie1").click(function(e){
e.preventDefault();
$("#die2").css("display","block");
});
$("#addDie2").click(function(e){
e.preventDefault();
$("#die3").css("display","block");
});
$()
var x=[0,90,180,270];
$("#play").click(function(e){
var position = $(".sf").offset();
var position2 = $("#die2 .sf").offset();
var position3 = $("#die3 .sf").offset();
console.log(position);
console.log(position2);
console.log(position3);
e.preventDefault();
do {
var rand1=Math.floor(Math.random()*4);
var rand2=Math.floor(Math.random()*4);
var rand3=Math.floor(Math.random()*4);
var rand4=Math.floor(Math.random()*4);
var rand5=Math.floor(Math.random()*4);
var rand6=Math.floor(Math.random()*4);
} while((x[rand1] == x[rand3] && x[rand2] == x[rand4]) || (x[rand1] == x[rand5] && x[rand2] == x[rand6]) || (x[rand3] == x[rand5] && x[rand4] == x[rand6]))
console.log(x[rand1] + "\n" + x[rand2] + "\n" + x[rand3] + "\n" + x[rand4] + "\n" + x[rand5] + "\n" + x[rand6] + "\n")
$("#die").css("transform","rotateX("+x[rand1]+"deg) rotateY("+x[rand2]+"deg)");
$("#die2").css("transform","rotateX("+x[rand3]+"deg) rotateY("+x[rand4]+"deg)");
$("#die3").css("transform","rotateX("+x[rand5]+"deg) rotateY("+x[rand6]+"deg)");
});
});
})
style.css
#dice {
background: url("../img/dice_bg.jpg") no-repeat;
background-position: center;
background-size: cover;
}
#roll-wrap {
perspective: 800;
perspective-origin: 50% 200px;
}
#addDie1, #addDie2{
width: 50%;
}
#addDie2 {
float:right;
}
#play {
width: 50%;
margin-left: 25%;
margin-top: 10px;
}
.btn {
position: relative;
display: inline-block;
margin: 0px auto;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
background-color: #2ecc71;
color: #ecf0f1;
transition: background-color .3s;
}
.btn > * {
position: relative;
}
.btn span {
display: block;
padding: 12px 24px;
}
.btn.orange {
background-color: #e67e22;
}
.btn.orange:hover, .btn.orange:focus {
background-color: #d35400;
}
.btn.red {
background-color: #e74c3c;
}
.btn.red:hover, .btn.red:focus {
background-color: #c0392b;
}
#die {
position: relative;
margin: 40px auto 0;
height: 400px;
width: 90%;
transition: transform 1.5s linear;
transform-style: preserve-3d;
}
#die2 {
position: relative;
margin: -400px auto 0;
height: 400px;
width: 90%;
transition: transform 1.5s linear;
transform-style: preserve-3d;
}
#die3 {
position: relative;
margin: -400px auto 0;
height: 400px;
width: 90%;
transition: transform 1.5s linear;
transform-style: preserve-3d;
}
.sf {
position: absolute;
height: 62px;
width: 62px;
padding: 20px;
background-color:white;;
font-size: 30px;
color: black;;
border: 1px solid white;
border-radius: 3px;
text-align: center;
}
/* TranslateZ = hoever elk vlak vaneen moet staan. rotateX waar het moet staan */
#die .f1, #die2 .f1, #die3 .f1 {
transform: rotateX(90deg) translateZ(30px);
}
#die .f2, #die2 .f2, #die3 .f2 {
transform: translateZ(30px);
}
#die .f3, #die2 .f3, #die3 .f1 {
transform: rotateY(90deg) translateZ(30px);
}
#die .f4, #die2 .f4, #die3 .f4 {
transform: rotateY(180deg) translateZ(30px);
}
#die .f5, #die2 .f5, #die3 .f5 {
transform: rotateY(-90deg) translateZ(30px);
}
#die .f6, #die2 .f6, #die3 .f6 {
transform: rotateX(-90deg) rotate(180deg) translateZ(30px);
}