3D iPhone CSS controls no JS

Developer
Mark Robbins
Size
4,125 Kb
Views
22,264
  1. 3D iPhone CSS controls no JS Previews
  2. 3D iPhone CSS controls no JS HTML Codes
  3. 3D iPhone CSS controls no JS CSS Codes
  4. 3D iPhone CSS controls no JS JS Codes

How do I make an 3d iphone css controls no js?

3D product view of iPhone 6, 3 axis rotation and zoom controls.As with most of my stuff this is built for use in email.. What is a 3d iphone css controls no js? How do you make a 3d iphone css controls no js? This script and codes were developed by Mark Robbins on 06 September 2022, Tuesday.

3D iPhone CSS controls no JS Previews
IQ Test

3D iPhone CSS controls no JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D iPhone CSS controls no JS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="rotate-X" accesskey="x">↑</button>
<button class="rotate-Y" accesskey="y">→</button>
<button class="rotate-Z" accesskey="z">↻</button>
<button class="reset" accesskey="r">reset</button>
<div class="tooltip"></div>
<input type="radio" name="zoom" id="zoom1">
<input type="radio" name="zoom" id="zoom2">
<input type="radio" name="zoom" id="zoom3" checked>
<input type="radio" name="zoom" id="zoom4">
<input type="radio" name="zoom" id="zoom5">
<label for="zoom1"></label>
<label for="zoom2"></label>
<label for="zoom3"></label>
<label for="zoom4"></label>
<label for="zoom5"></label>
<div class="box-wrapper"> <div class="box"><div class="box2"><div class="box3"> <div class="front"> <video autoplay loop> <source src="https://embed.wistia.com/deliveries/54e83f10c6ffb55e5768ecc2ea8e3e3219ba0be0/file.mp4" type="video/mp4"> </video> </div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </div></div></div>
</div> <script src="js/index.js"></script>
</body>
</html>

3D iPhone CSS controls no JS - Script Codes CSS Codes

body{ background-color: #333; box-shadow:inset 0 0 20vw #000; min-height:500px; height: 100vh; margin: 0;
}
button[class*=rotate]{ font-size:25px; height:1.5em; width:1.5em; line-height:1;
}
button{ position:relative; z-index:10; background:#ccc; border:2px groove #aaa; text-shadow:1px 1px 0 #fff; border-radius: .4em;
}
button:active, button:hover{ background:#aaa; border:2px ridge #aaa;
}
button.reset{ display:block; font-size:15px; padding:0.2em 1.5em;
}
.box-wrapper { -webkit-perspective: 1000px; perspective: 1000px; width:340px; height:700px; position:absolute; left:50%; margin-left:-170px; top:50%; margin-top:-350px; box-reflect: below 80px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1))); -webkit-box-reflect: below 80px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1))); -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s;
}
.box, .box2, .box3{ position: relative; width: 200px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective-origin: 170px 350px; perspective-origin: 170px 350px; -webkit-transform-origin: 170px 350px; transform-origin: 170px 350px; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: 60s; animation-duration: 60s; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.box{ -webkit-animation-name: rotate-X; animation-name: rotate-X;
}
.box2{ -webkit-animation-name: rotate-Y; animation-name: rotate-Y;
}
.box3{ -webkit-animation-name: rotate-Z; animation-name: rotate-Z;
}
button.rotate-X:active ~ .box-wrapper .box{ -webkit-animation-play-state: running; animation-play-state: running;
}
button.rotate-Y:active ~ .box-wrapper .box2{ -webkit-animation-play-state: running; animation-play-state: running;
}
button.rotate-Z:active ~ .box-wrapper .box3{ -webkit-animation-play-state: running; animation-play-state: running;
}
button.reset:active ~ .box-wrapper [class*=box]{ -webkit-animation-name:none; animation-name:none;
}
@media screen and (max-device-width:800px){ button.rotate-X:hover ~ .box-wrapper .box{ -webkit-animation-play-state: running; animation-play-state: running; } button.rotate-Y:hover ~ .box-wrapper .box2{ -webkit-animation-play-state: running; animation-play-state: running; } button.rotate-Z:hover ~ .box-wrapper .box3{ -webkit-animation-play-state: running; animation-play-state: running; } button.reset:hover ~ .box-wrapper [class*=box]{ -webkit-animation-name:none; animation-name:none; }
}
.box div{ position:absolute; background-size:cover;
}
.front, .back{ width:340px; height:700px; border-radius:50px;
}
.left, .right{ width:36px; height:620px; background-position:center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.top, .bottom{ width:260px; height:36px; background-position:center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.front{ background-image:url(https://s15.postimg.org/7lkz18k7v/front.png); -webkit-transform: translateZ(18px); transform: translateZ(18px);
}
.back { background-image:url(https://s15.postimg.org/5v1xzr2or/back.png); -webkit-transform: translateZ(-18px) rotateY(180deg); transform: translateZ(-18px) rotateY(180deg);
}
.top{ background-image:url(https://s15.postimg.org/gcrzvi3iz/top.png); -webkit-transform:rotateX(-90deg) translateY(-18px) translateX(40px); transform:rotateX(-90deg) translateY(-18px) translateX(40px); -webkit-transform-origin: top center; transform-origin: top center;
}
.bottom{ background-image:url(https://s15.postimg.org/j5l7fj3vf/bottom.png); -webkit-transform: rotateX(90deg) translateY(18px) translateZ(-664px) translateX(40px); transform: rotateX(90deg) translateY(18px) translateZ(-664px) translateX(40px); -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
.left{ background-image:url(https://s15.postimg.org/n4ieycsij/left.png); -webkit-transform:rotateY(270deg) translateX(-18px) translateY(40px); transform:rotateY(270deg) translateX(-18px) translateY(40px); -webkit-transform-origin: center left; transform-origin: center left;
}
.right{ background-image:url(https://s15.postimg.org/ulrmdki1n/right.png); -webkit-transform: rotateY(-270deg) translateX(0px) translateY(40px) translateZ(322px); transform: rotateY(-270deg) translateX(0px) translateY(40px) translateZ(322px); -webkit-transform-origin: top rigth; transform-origin: top rigth;
}
@-webkit-keyframes rotate-X { from {-webkit-transform: rotateX(0deg);transform: rotateX(0deg)} to {-webkit-transform: rotateX(3600deg);transform: rotateX(3600deg)}
}
@keyframes rotate-X { from {-webkit-transform: rotateX(0deg);transform: rotateX(0deg)} to {-webkit-transform: rotateX(3600deg);transform: rotateX(3600deg)}
}
@-webkit-keyframes rotate-Y { from {-webkit-transform: rotateY(0deg);transform: rotateY(0deg)} to {-webkit-transform: rotateY(3600deg);transform: rotateY(3600deg)}
}
@keyframes rotate-Y { from {-webkit-transform: rotateY(0deg);transform: rotateY(0deg)} to {-webkit-transform: rotateY(3600deg);transform: rotateY(3600deg)}
}
@-webkit-keyframes rotate-Z { from {-webkit-transform: rotateZ(0deg);transform: rotateZ(0deg)} to {-webkit-transform: rotateZ(3600deg);transform: rotateZ(3600deg)}
}
@keyframes rotate-Z { from {-webkit-transform: rotateZ(0deg);transform: rotateZ(0deg)} to {-webkit-transform: rotateZ(3600deg);transform: rotateZ(3600deg)}
}
input[type=radio]{ display:none;
}
label{ position:relative; z-index:100; color:#fff;
}
label:after{ display:inline-block; width:1em; height:1em; text-align:center; line-height:1; padding:5px; background:#444; border:2px groove #aaa; text-shadow:1px 1px 0 #333; border-radius: .4em;
}
#zoom1:checked ~ .box-wrapper{ -webkit-transform:scale(.5); transform:scale(.5);
}
#zoom2:checked ~ .box-wrapper{ -webkit-transform:scale(.75); transform:scale(.75);
}
#zoom3:checked ~ .box-wrapper{ -webkit-transform:scale(1); transform:scale(1);
}
#zoom4:checked ~ .box-wrapper{ -webkit-transform:scale(1.5); transform:scale(1.5);
}
#zoom5:checked ~ .box-wrapper{ -webkit-transform:scale(2); transform:scale(2);
}
#zoom1:checked ~ [for="zoom1"]:after{ content:'-'; opacity:0.5;
}
#zoom1:checked ~ [for="zoom2"]:after{ content:'+'; font-size:1.5em;
}
#zoom2:checked ~ [for="zoom1"]:after{ content:'-';
}
#zoom2:checked ~ [for="zoom3"]:after{ content:'+'; font-size:1.5em;
}
#zoom3:checked ~ [for="zoom2"]:after{ content:'-';
}
#zoom3:checked ~ [for="zoom4"]:after{ content:'+'; font-size:1.5em;
}
#zoom4:checked ~ [for="zoom3"]:after{ content:'-';
}
#zoom4:checked ~ [for="zoom5"]:after{ content:'+'; font-size:1.5em;
}
#zoom5:checked ~ [for="zoom4"]:after{ content:'-';
}
#zoom5:checked ~ [for="zoom5"]:after{ content:'+'; font-size:1.5em; opacity:0.5;
}
/* Rounding off corners */
.top:before,
.bottom:before,
.left:before,
.right:before,
.top:after,
.bottom:after,
.left:after,
.right:after{ content:''; width:36px; height:30px; position:absolute; background:#aaa; background: -webkit-linear-gradient(bottom, #555 15%,#888 100%); background: linear-gradient(to top, #555 15%,#888 100%);
}
.top:before{ left: -18px; top: 18px; -webkit-transform: rotateY(30deg) rotate(90deg); transform: rotateY(30deg) rotate(90deg); -webkit-transform-origin: top; transform-origin: top;
}
.top:after{ right: -18px; top: 19px; -webkit-transform: rotateY(-30deg) rotate(270deg); transform: rotateY(-30deg) rotate(270deg); -webkit-transform-origin: top; transform-origin: top;
}
.bottom:before{ left: -17px; top: 18px; -webkit-transform: rotateY(30deg) rotate(90deg); transform: rotateY(30deg) rotate(90deg); -webkit-transform-origin: top; transform-origin: top;
}
.bottom:after{ right: -18px; top: 19px; -webkit-transform: rotateY(-30deg) rotate(270deg); transform: rotateY(-30deg) rotate(270deg); -webkit-transform-origin: top; transform-origin: top;
}
.left:before{ -webkit-transform: rotateX(30deg) rotate(180deg); transform: rotateX(30deg) rotate(180deg); -webkit-transform-origin: top; transform-origin: top;
}
.left:after{ bottom:-30px; -webkit-transform:rotateX(-30deg); transform:rotateX(-30deg); -webkit-transform-origin:top; transform-origin:top;
}
.right:before{ -webkit-transform: rotateX(30deg) rotate(180deg); transform: rotateX(30deg) rotate(180deg); -webkit-transform-origin: top; transform-origin: top;
}
.right:after{ bottom:-30px; -webkit-transform:rotateX(-30deg); transform:rotateX(-30deg); -webkit-transform-origin:top; transform-origin:top;
}
video{ height:auto; width:300px; display:block; margin:84px auto 0 auto;
}
.tooltip{ position:fixed; top:10px; left:130px; width:150px; padding:5px; text-align:center; font-size:14px; font-family:arial, sans-serif; color:#fff; background:#f69513; border-radius:10px; z-index:1000; -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent) , to(rgba(250, 250, 250, 0.1))); -webkit-animation:tooltip-on 15s forwards; animation:tooltip-on 15s forwards; -webkit-animation-delay:3s; animation-delay:3s; opacity:0; -webkit-transition: all .5s; transition:all .5s; -webkit-transition-delay:100s; transition-delay:100s;
}
button:active ~ .tooltip{ top:-50px; -webkit-transform:scale(0); transform:scale(0); -webkit-transition-delay:0s; transition-delay:0s;
}
.tooltip::after{ content:'Click the buttons to spin the phone'
}
.tooltip::before{ content:''; position:absolute; left:-10px; top:10px; display:block; border-style:solid; border-color:transparent #f69513 transparent transparent; border-width:10px 10px 10px 0;
}
@-webkit-keyframes tooltip-on{ 0%{ -webkit-transform:translate(0,-80px); transform:translate(0,-80px); opacity:0; } 5%, 100%{ -webkit-transform:translate(0,0px); transform:translate(0,0px); opacity:1; }
}
@keyframes tooltip-on{ 0%{ -webkit-transform:translate(0,-80px); transform:translate(0,-80px); opacity:0; } 5%, 100%{ -webkit-transform:translate(0,0px); transform:translate(0,0px); opacity:1; }
}

3D iPhone CSS controls no JS - Script Codes JS Codes

// I don't do JS I do email!
// Video is no longer supported in iOS.
// A few thigns to work on...
// Improve rounding of sides
// Relection perspective is off on Y rotation. Try and create some kind of box-reflect-origin type thing.
3D iPhone CSS controls no JS - Script Codes
3D iPhone CSS controls no JS - Script Codes
Home Page Home
Developer Mark Robbins
Username M_J_Robbins
Uploaded September 06, 2022
Rating 4.5
Size 4,125 Kb
Views 22,264
Do you need developer help for 3D iPhone CSS controls no JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Robbins (M_J_Robbins) Script Codes
Name
Wolfenstein 3d
SVG email test
CSS animated button
ThWack-a-Vole
CSS Super Mario - No JS
Animated images off pixel art
CSS Slider Puzzle Game
CSS sliders
Birthday unicorn
Xmas email test
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!