How can I run Cube 3D Amination? - html

With clone coding, I coded a cube to rotate when a button was clicked.
(However, since it is still in the learning stage, JS is not used, only HTML and CCS are used.)
I wanted an angle to look down on the box slightly from above, but the result is implemented only by viewing it from the center of the cube front.
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans";
line-height: 1.618em;
color: #444;
overflow-y: scroll;
}
.wrapper {
max-width: 50rem;
width: 100%;
margin: 1rem auto;
text-align: center;
}
.prespective {
perspective: 2000px;
position: relative;
perspective-origin: 25rem-150px;
}
.cube {
position: relative;
width: 400px;
height: 400px;
margin: 3.5rem auto;
transition: 0.5s;
transform-style: preserve-3d;
/* animation: rotate 10s infinite linear; */
}
.cube div {
position: absolute;
width: 400px;
height: 400px;
opacity: 0.95;
}
.cube div img {
width: 100%;
height: 100%;
}
#keyframes rotate {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
.front {
transform: translateZ(200px);
}
.back {
transform: translateZ(-200px) rotateY(180deg);
}
.left {
transform: rotateY(-90deg) translateZ(200px);
}
.right {
transform: rotateY(90deg) translateZ(200px);
}
.top {
transform: rotateX(90deg) translateZ(200px);
}
.bottom {
transform: rotateX(-90deg) translateZ(200px);
}
input {
display: none;
}
#rotate:checked ~ .cube{
animation: rotate 10s infinite linear;
}
#back:checked ~ .cube{
animation: none;
transform: rotateY(180deg);
}
#front:checked ~ .cube{
animation:none;
transform:none;
}
#right:checked ~ .cube{
animation:none;
transform:rotateY(-90deg);
}
#left:checked ~ .cube{
animation:none;
transform:rotateY(90deg);
}
#top:checked ~ .cube{
animation:none;
transform:rotateX(-90deg);
}
#bottom:checked ~ .cube{
animation:none;
transform:rotateX(90deg);
}
label{
display: inline-block;
padding: 0.25em 0.5em ;
border-radius: 0.5rem;
background: darkgreen; color: #fff; margin: 0. 0.25rem;
transition: 0.25s;
}
input:checked + label{
background: goldenrod;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Rotatable 3D Cube</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="perspective">
<input type="radio" id="rotate" name="switch"/>
<label for="rotate">auto</label>
<input type="radio" id="front" name="switch"/>
<label for="front">front</label>
<input type="radio" id="left" name="switch"/>
<label for="left">left</label>
<input type="radio" id="back" name="switch"/>
<label for="back">back</label>
<input type="radio" id="right" name="switch"/>
<label for="right">right</label>
<input type="radio" id="top" name="switch"/>
<label for="top">top</label>
<input type="radio" id="bottom" name="switch"/>
<label for="bottom">bottom</label>
<div class="cube">
<div class="front">
<img src="https://smilecmk.github.io/hosted-assets/images/front.jpg">
</div>
<div class="back">
<img src="https://smilecmk.github.io/hosted-assets/images/back.jpg">
</div>
<div class="top">
<img src="https://smilecmk.github.io/hosted-assets/images/top.jpg">
</div>
<div class="bottom">
<img src="https://smilecmk.github.io/hosted-assets/images/bottom.jpg">
</div>
<div class="left">
<img src="https://smilecmk.github.io/hosted-assets/images/left.jpg">
</div>
<div class="right">
<img src="https://smilecmk.github.io/hosted-assets/images/right.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
**


You would need to add a wrapper that is rotated and keeps the perspective like your cube. I've created a quick example similar to your screenshot provided.
The only thing I've added is cubeWrapper as a new class and DOM Element and included it into your selectors so they stay valid.
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans";
line-height: 1.618em;
color: #444;
overflow-y: scroll;
}
.wrapper {
max-width: 50rem;
width: 100%;
margin: 1rem auto;
text-align: center;
}
.prespective {
perspective: 2000px;
position: relative;
perspective-origin: ca;c(25rem - 150px);
}
.cube {
position: relative;
width: 400px;
height: 400px;
margin: 3.5rem auto;
transition: 0.5s;
transform-style: preserve-3d;
/* animation: rotate 10s infinite linear; */
}
.cube div {
position: absolute;
width: 400px;
height: 400px;
opacity: 0.95;
}
.cube div img {
width: 100%;
height: 100%;
}
#keyframes rotate {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
.cubeWrapper {
perspective: 1200px;
transform: rotateX(-20deg);
transform-style: preserve-3d;
}
.front {
transform: translateZ(200px);
}
.back {
transform: translateZ(-200px) rotateY(180deg);
}
.left {
transform: rotateY(-90deg) translateZ(200px);
}
.right {
transform: rotateY(90deg) translateZ(200px);
}
.top {
transform: rotateX(90deg) translateZ(200px);
}
.bottom {
transform: rotateX(-90deg) translateZ(200px);
}
input {
display: none;
}
#rotate:checked ~ .cubeWrapper .cube{
animation: rotate 10s infinite linear;
}
#back:checked ~ .cubeWrapper .cube{
animation: none;
transform: rotateY(180deg);
}
#front:checked ~ .cubeWrapper .cube{
animation:none;
transform:none;
}
#right:checked ~ .cubeWrapper .cube{
animation:none;
transform:rotateY(-90deg);
}
#left:checked ~ .cubeWrapper .cube{
animation:none;
transform:rotateY(90deg);
}
#top:checked ~ .cubeWrapper .cube{
animation:none;
transform:rotateX(-90deg);
}
#bottom:checked ~ .cubeWrapper .cube{
animation:none;
transform:rotateX(90deg);
}
label{
display: inline-block;
padding: 0.25em 0.5em ;
border-radius: 0.5rem;
background: darkgreen; color: #fff; margin: 0. 0.25rem;
transition: 0.25s;
}
input:checked + label{
background: goldenrod;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Rotatable 3D Cube</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="perspective">
<input type="radio" id="rotate" name="switch"/>
<label for="rotate">auto</label>
<input type="radio" id="front" name="switch"/>
<label for="front">front</label>
<input type="radio" id="left" name="switch"/>
<label for="left">left</label>
<input type="radio" id="back" name="switch"/>
<label for="back">back</label>
<input type="radio" id="right" name="switch"/>
<label for="right">right</label>
<input type="radio" id="top" name="switch"/>
<label for="top">top</label>
<input type="radio" id="bottom" name="switch"/>
<label for="bottom">bottom</label>
<div class="cubeWrapper">
<div class="cube">
<div class="front">
<img src="https://smilecmk.github.io/hosted-assets/images/front.jpg">
</div>
<div class="back">
<img src="https://smilecmk.github.io/hosted-assets/images/back.jpg">
</div>
<div class="top">
<img src="https://smilecmk.github.io/hosted-assets/images/top.jpg">
</div>
<div class="bottom">
<img src="https://smilecmk.github.io/hosted-assets/images/bottom.jpg">
</div>
<div class="left">
<img src="https://smilecmk.github.io/hosted-assets/images/left.jpg">
</div>
<div class="right">
<img src="https://smilecmk.github.io/hosted-assets/images/right.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

How do I stop my custom mouse cursor from reverting to default when hovering over certain objects and div classes? (HTML, CSS)

So I've got two custom mouse cursors that I'd like to keep at all times. The first cursor is a face, and the second is a face with an open mouth, it switches to the second one when the user clicks.
My problem is that when the user hovers over a certain object, like a div class, then the custom cursor disappears and it reverts to the default cursor.
How would I fix this problem?
The code for the cursor is in my CSS document.
Screenshots: https://i.imgur.com/P8ceHUo.jpeg, https://i.imgur.com/HSNLXpb.jpeg, https://i.imgur.com/VUd5BKx.jpg
body {
height: 100vh;
cursor: url('../images/cursor3.png'), auto;
background-image: url(../images/backgroundDonuts.jpg);
}
body:active {
height: 100vh;
cursor: url('../images/cursor3-eat.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="../images/donut-final.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="../images/donut-final.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="../images/donut-final.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="../images/donut-final.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="../images/donut-final.png"></label>
</div>
</section>
</body>
</html>

Below the CSS for my default cursor overrides I always use. I added your cursor as an example (can't test if it works, though), modify them to your needs as required.
/*****************************/
/* Global cursor preferences */
/*****************************/
body { cursor: default; cursor: url('../images/cursor3.png'), auto }
input { cursor: auto } /* Use a custom cursor, except on: */
input[list="datalist"],
input[type="button" ],
input[type="checkbox"],
input[type="radio" ],
input[type="color" ],
input[type="range" ],
input[type="reset" ],
input[type="file" ],
input[type="submit" ],
label:not([for=""]),
a,button,select,keygen { cursor: pointer }
[contenteditable="true"] { cursor: text }

You can use universal selector * to make it work on every :hover element (obviously you will need to just change url for yours):
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
DEMO (just click to see the active)
body {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
background-image: url('https://cdn.pixabay.com/photo/2020/01/14/10/55/cartoon-4764725_960_720.png');
}
body:active {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
section img{
max-width: 40px;
}
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
</section>
</body>
</html>

3D TABS with imrovments of width and height

I have a 3D Tab on my website which I got from codepen (codepen.io/vavik96/pen/QjPVRL).
I increased the width (800px) and height (550px).
No matter how much I tried I couldn't set a right size to it.
It should be screen web page sized to meet my needs.
Somebody help me.
Here my work.
.perspective {
-webkit-perspective: 76em;
perspective: 76em;
-webkit-perspective-origin: 50% 50px;
perspective-origin: 50% 50px;
width: 494px;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: #fff;
text-align: center;
}
input { display: none; }
.tab {
position: absolute;
width: 80px;
height: 70px;
background: pink;
right: 0;
line-height: 70px;
font-weight: 300;
}
.tab:nth-child(1) {
top: -80px;
left:84px;
background: #06D6A0;
}
.tab:nth-child(2) {
top: -80px;
left: 174px;
background: #1B9AAA;
}
.tab:nth-child(3) {
top: -80px;
left: 262px;
background: #EF476F;
}
.tab:nth-child(4) {
top: -80px;
left: 352px;
background: red;
}
.cube {
position: relative;
width: 300px;
height: 200px;
-webkit-transform-origin: 0 100px;
-ms-transform-origin: 0 100px;
transform-origin: 100px 100px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.5s ease-in;
transition: transform 0.5s ease-in;
}
.tab-content {
width: 800px;
height: 550px;
position: absolute;
}
.tab-content h1 {
font-size: 25px;
margin: 75px 0 10px;
font-weight: 300;
}
.tab-content p { font-size: 12px; }
.tab-content:nth-child(1) {
-webkit-transform: translateZ(100px);
transform: translateZ(700px);
background: #06D6A0;
}
.tab-content:nth-child(2) {
-webkit-transform: rotateX(-270deg) translateY(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
background: #EF476F;
}
.tab-content:nth-child(3) {
-webkit-transform: rotateX(90deg) translateY(200px);
transform: rotateY(90deg) translateX(100px);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom right;
background: red;
}
.tab-content:nth-child(4) {
-webkit-transform: translateZ(100px);
transform: translateZ(-100px);
background: #1B9AAA;
}
#tab-one:checked ~ .cube {
-webkit-transform: rotateY(90deg);
transform: rotateY(-90deg);
}
#tab-two:checked ~ .cube {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#tab-three:checked ~ .cube {
-webkit-transform: rotateX(-90deg);
transform: rotateY(-180deg);
}
#tab-four:checked ~ .cube {
-webkit-transform: rotateX(90deg);
transform: rotateY(-270deg);
}
<br>
<br>
<br>
<br>
<br>
<div class="perspective">
<label class="tab" for="tab-two">Tab 2</label>
<label class="tab" for="tab-one">Tab 1</label>
<label class="tab" for="tab-three">Tab 3</label>
<label class="tab" for="tab-four">Tab 4</label>
<input type="radio" name="tabs" id="tab-one">
<input type="radio" name="tabs" id="tab-two">
<input type="radio" name="tabs" id="tab-three">
<input type="radio" name="tabs" id="tab-four">
<div class="cube">
<div class="tab-content">
<h1>Tab 1</h1>
<p>THIS IS AWESOME</p>
</div>
<div class="tab-content">
<h1>Tab 2</h1>
<p>THIS IS COOL</p>
</div>
<div class="tab-content">
<h1>Tab 3</h1>
<p>THIS IS SWEET</p>
</div>
<div class="tab-content">
<h1>Tab 4</h1>
<p>THIS IS Good JOB</p>
</div>
</div>
</div>

width: 100% !important;
please add your code to your question next time you ask someone to help you.

css html based slider / show part of next slide on hover

Been trying for a longer time now to adjust the effect on the slider below. The effect I am trying to create is that when you hover the right or left side it shows a bit of the next or previous slide.
Example: when the active slide is slide 1 and you hover the left side (say 10% of the total slide) it should show a piece of the previous slide and when hovering the right side of slide 1 (again 10%) it should show a bit of the next slide.
I am not completely sure whether this effect is possible in CSS/HTML, however it might work with a hover state. But if it should be possible, one of you should probably know that :)
/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
background: red;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* each slide background color */
.slide1 {
background: #00bcd7;
left: 0;
}
.slide2 {
background: #009788;
left: 100%
}
.slide3 {
background: #ff5608;
left: 200%
}
.slide4 {
background: #607d8d;
left: 300%;
}
.slider > div {
text-align: center;
}
/* Slider inner content */
.slider h2 {
color: #FFF;
font-weight: 900;
text-transform: uppercase;
font-size: 45px;
line-height: 120%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider .button {
color: #FFF;
padding: 5px 50px;
background: rgba(255,255,255,0.3);
text-decoration: none;
opacity: 0;
font-size: 15px;
line-height: 30px;
display: inline-block;
-webkit-transform: translateX(-500px);
transform: translateX(-500px);
}
.slider h2, .slider .button {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
/* Next and previous button */
.control {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 55;
}
.control label {
z-index: 0;
display: none;
text-align: center;
line-height: 50px;
font-size: 50px;
color: #FFF;
cursor: pointer;
opacity: 0.2;
}
.control label:hover {
opacity: 0.5;
}
.next {
right: 1%;
}
.previous {
left: 1%;
}
/* Slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255,255,255,0.2);
margin: 0 2px;
border: solid 1px rgba(255,255,255,0.4);
cursor: pointer;
}
/* Slider control active css */
.slide-radio1:checked ~ .next .numb2,
.slide-radio2:checked ~ .next .numb3,
.slide-radio3:checked ~ .next .numb4,
.slide-radio2:checked ~ .previous .numb1,
.slide-radio3:checked ~ .previous .numb2,
.slide-radio4:checked ~ .previous .numb3 {
display: block;
z-index: 1
}
/* Slider pagination active css */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
background: rgba(255,255,255,1)
}
/* css for sliding effect when you click on control button*/
.slide-radio1:checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked ~ .slide1 h2,
.slide-radio2:checked ~ .slide2 h2,
.slide-radio3:checked ~ .slide3 h2,
.slide-radio4:checked ~ .slide4 h2,
.slide-radio1:checked ~ .slide1 .button,
.slide-radio2:checked ~ .slide2 .button,
.slide-radio3:checked ~ .slide3 .button,
.slide-radio4:checked ~ .slide4 .button {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
#media only screen and (max-width: 767px) {
.slider h2 {
font-size: 20px;
}
.slider > div {
padding: 0 2%
}
.control label {
font-size: 35px;
}
.slider .button {
padding: 0 30px;
}
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<div class="next control">
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-right"></i></label>
</div>
<div class="previous control">
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-left"></i></label>
</div>
<div class="slider slide1">
<div>
<img src="http://fillmurray.com/801/450"></img>
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://fillmurray.com/801/450"></img>
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://fillmurray.com/801/450"></img>
</div>
</div>
<div class="slider slide4">
<div>
<img src="http://fillmurray.com/801/450"></img>
</div>
</div>
</div>

You were almost there. There were a few transitions missing only:
.slide-radio1:checked ~ .control.previous {
display: none;
}
.slide-radio1:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.slide-radio2:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
}
.slide-radio2:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-90%);
transform: translateX(-90%);
}
.slide-radio3:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-210%);
transform: translateX(-210%);
}
.slide-radio3:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-190%);
transform: translateX(-190%);
}
.slide-radio4:checked ~ .control.next {
display: none;
}
.slide-radio4:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-290%);
transform: translateX(-290%);
}
.slide-radio1:checked ~ .control .numb1 {
display: inline-block;
}
.slide-radio2:checked ~ .control .numb2 {
display: inline-block;
}
.slide-radio3:checked ~ .control .numb3 {
display: inline-block;
}
.slide-radio4:checked ~ .control .numb4 {
display: inline-block;
}
I also had to change icons with P and N characters. I didn't have those icon fonts.
/* Slider wrapper*/
.css-slider-wrapper {
background: #FFF;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
background: red;
position: absolute;
left: 0;
top: 0;
z-index: 0;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* each slide background color */
.slide1 {
background: #00bcd7;
left: 0;
}
.slide2 {
background: #009788;
left: 100%
}
.slide3 {
background: #ff5608;
left: 200%
}
.slide4 {
background: #607d8d;
left: 300%;
}
/* Slider inner content */
.slider h2 {
color: #FFF;
font-weight: 900;
text-transform: uppercase;
font-size: 45px;
line-height: 120%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slider .button {
color: #FFF;
padding: 5px 50px;
background: rgba(255,255,255,0.3);
text-decoration: none;
opacity: 0;
font-size: 15px;
line-height: 30px;
display: inline-block;
-webkit-transform: translateX(-500px);
transform: translateX(-500px);
}
.slider h2, .slider .button {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
/* Next and previous button */
.control {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 55;
}
.control label {
z-index: 0;
text-align: center;
line-height: 50px;
font-size: 50px;
color: #FFF;
cursor: pointer;
opacity: 0.2;
display: none;
}
.control:hover label {
opacity: 0.5;
}
.next {
right: 1%;
}
.previous {
left: 1%;
}
/* Slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255,255,255,0.2);
margin: 0 2px;
border: solid 1px rgba(255,255,255,0.4);
cursor: pointer;
}
/* Slider pagination active css */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
background: rgba(255,255,255,1)
}
/* css for sliding effect when you click on control button*/
.slide-radio1:checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked ~ .slide1 h2,
.slide-radio2:checked ~ .slide2 h2,
.slide-radio3:checked ~ .slide3 h2,
.slide-radio4:checked ~ .slide4 h2,
.slide-radio1:checked ~ .slide1 .button,
.slide-radio2:checked ~ .slide2 .button,
.slide-radio3:checked ~ .slide3 .button,
.slide-radio4:checked ~ .slide4 .button {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
.slide-radio1:checked ~ .control.previous {
display: none;
}
.slide-radio1:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.slide-radio2:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
}
.slide-radio2:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-90%);
transform: translateX(-90%);
}
.slide-radio3:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-210%);
transform: translateX(-210%);
}
.slide-radio3:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-190%);
transform: translateX(-190%);
}
.slide-radio4:checked ~ .control.next {
display: none;
}
.slide-radio4:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-290%);
transform: translateX(-290%);
}
.slide-radio1:checked ~ .control .numb1 {
display: inline-block;
}
.slide-radio2:checked ~ .control .numb2 {
display: inline-block;
}
.slide-radio3:checked ~ .control .numb3 {
display: inline-block;
}
.slide-radio4:checked ~ .control .numb4 {
display: inline-block;
}
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<div class="control previous">
<label for="slider_1" class="numb2"> P </label>
<label for="slider_2" class="numb3"> P </label>
<label for="slider_3" class="numb4"> P </label>
</div>
<div class="control next">
<label for="slider_2" class="numb1"> N </label>
<label for="slider_3" class="numb2"> N </label>
<label for="slider_4" class="numb3"> N </label>
</div>
<div class="slider slide1">
<img src="http://fillmurray.com/801/450" />
</div>
<div class="slider slide2">
<img src="http://fillmurray.com/800/450" />
</div>
<div class="slider slide3">
<img src="http://fillmurray.com/799/450" />
</div>
<div class="slider slide4">
<img src="http://fillmurray.com/798/450" />
</div>
</div>

CSS3 Class Inherits Div Opacity in Safari 9.x?

W-I-P DEMO (Reduced clutter and added "Correct" and "Incorrect" labels on cube faces for clarity.) An animated CSS cube with 4 autoplay slideshows and animated text (on hover) on each pane works as expected on all 4 cube faces in current versions of FF and Chrome (not yet tested in others), but Safari (both desktop and mobile versions) appear to be overriding the "slidetext" class with the "#keyframes slideshow" opacity (i.e., at 40% of the cube rotation), resulting in opacity-faded text on 2 of the cube faces ~1/2-way through the cube rotation. Where are my coding errors, or could this possibly be a Safari glitch?
HTML
<div id="cubecontainer">
<div class="shadowcontainer">
<div class="shadow">
<div> </div>
</div><!-- end of shadow -->
</div><!-- end of shadowcontainer -->
<div class="cubewrapper">
<div class="cube">
<div class="front"><a href="websites.php">
<div class="slideshowcontainerW">
<img class="slide" src="./images/cube/cubeW1.png" alt="W1" />
<img class="slide" src="./images/cube/cubeW2.png" alt="W2" />
<img class="slide" src="./images/cube/cubeW3.png" alt="W3" />
<img class="slide" src="./images/cube/cubeW4.png" alt="W4" />
</div><span class="slidetext">WEB SITES</span></a>
</div>
<div class="back"><a href="extraordinary.php">
<div class="slideshowcontainerE">
<img class="slide" src="./images/cube/cubeE1.png" alt="E1" />
<img class="slide" src="./images/cube/cubeE2.png" alt="E2" />
<img class="slide" src="./images/cube/cubeE3.png" alt="E3" />
<img class="slide" src="./images/cube/cubeE4.png" alt="E4" />
</div><span class="slidetext">EXTRAORDINARY</span></a>
</div>
<div class="top"> </div>
<div class="bottom"> </div>
<div class="left"><a href="profile.php">
<div class="slideshowcontainerP">
<img class="slide" src="./images/cube/cubeP1.png" alt="P1" />
<img class="slide" src="./images/cube/cubeP2.png" alt="P2" />
<img class="slide" src="./images/cube/cubeP3.png" alt="P3" />
<img class="slide" src="./images/cube/cubeP4.png" alt="P4" />
</div><span class="slidetext">PROFILE</span></a>
</div>
<div class="right"><a href="logos.php">
<div class="slideshowcontainerL">
<img class="slide" src="./images/cube/cubeL1.png" alt="L1" />
<img class="slide" src="./images/cube/cubeL2.png" alt="L2" />
<img class="slide" src="./images/cube/cubeL3.png" alt="L3" />
<img class="slide" src="./images/cube/cubeL4.png" alt="L4" />
</div><span class="slidetext">LOGOS</span></a>
</div>
</div><!-- end of cube -->
</div><!-- end of cubewrapper -->
</div><!-- end of cubecontainer -->
CSS
#cubecontainer {
float:right;
padding-left:50px;
padding-right:50px;
padding-top:10px;
padding-bottom:220px;
}
#cubecontainer:hover div {
animation-play-state: paused;
}
.cubewrapper {
perspective: 800px;
perspective-origin: 50% 100px;
transform-style: preserve-3d;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.cube p {
padding: 40px 0;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.95;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
background-color: #FFF;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
background-color: #FFF;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
background-color: #FFF;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
background-color: #FFF;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
background-color: #FFF;
}
.front {
transform: translateZ(100px);
background-color: #FFF;
}
#keyframes cubespin {
from { transform: rotateY(0); }
to { transform: rotateY(-360deg); }
}
.cube, .shadow {
animation: cubespin 16s linear infinite;
}
.shadowcontainer {
perspective: 800px;
perspective-origin: 50% 100px;
}
.shadow {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.shadow div {
position: absolute;
width: 200px;
height: 200px;
top: 0px;
opacity: 0.98;
box-shadow: 0px 0px 50px 10px #000;
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
/*END CUBE*/
/*BEGIN CODE FOR SLIDESHOW ON CUBE FACES*/
.slideshowcontainerE, .slideshowcontainerL, .slideshowcontainerP, .slideshowcontainerW {
margin: 0 auto;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.slide {
position: absolute;
animation: slideshow 20s infinite;
opacity: 0;
}
.slidetext {
width:195px;
margin: 0px auto;
padding-right:5px;
position: absolute;
text-align: right;
font-size: 1em;
color:#FFF;
text-shadow: 0px 0px 5px #F00;
background:rgba(0,0,0,.75);
border: none;
}
.slidetext:hover {
width:195px;
margin:0px auto;
padding-right:5px;
position: absolute;
text-align: right;
font-size: 1em;
color:#F00;
text-shadow: 0px 0px 5px #FFF;
background:rgba(255,200,100,.75);
border: none;
transition: color, background .5s ease-in;
}
#keyframes slideshow {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 15s;
}
img:nth-child(2) {
animation-delay: 10s;
}
img:nth-child(3) {
animation-delay: 5s;
}
img:nth-child(4) {
animation-delay: 0s;
}
/*END CODE FOR SLIDESHOW ON CUBE FACES*/

Navbar collapsing without Bootstrap

Hi I was trying to get my navigation bar to collapse on smaller screen size I am trying to do this without bootstrap any suggestions?
HTML
<html>
<head>
<title></title>
<!-- CSS STYLESHEET -->
<link rel="stylesheet" type="text/css" href="index.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy|Montez|Courgette|Slackey|Fontdiner+Swanky|Permanent+Marker|Aclonica|Lobster" rel='stylesheet' type='text/css'>
<!-- JavaScript's -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<script type="text/javascript">
$(function() {
// note that this doens't call hide
$('#loading').delay(3000).fadeOut('slow');
});
</script>
<body>
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div id="object"></div>
</div>
</div>
</div>
<!-- Loading Section Ends -->
<div class="header">
<nav class="nav_first">
<img class="nike" src="http://s3.amazonaws.com/nikeinc/assets/7366/Nike_Swoosh_Logo_White_original.jpg?1328660973">
<ul>
<li class="wiggle" class="wiggle" class="wiggle" class="wiggle">Home</li>
<li class="wiggle" class="wiggle" class="wiggle">About Us</li>
<li class="wiggle" class="wiggle">Shop</li>
<li class="wiggle">Contact</li>
</ul>
</nav>
</div>
<div class="wrapper">
<div>
<h1 id="nike_text">Nike</h1>
</div>
</div>
</body>
</html>
CSS
body {
width: auto;
height: auto;
font-size:14px;
margin:0;
background-color:black;
}
#loading {
display:none;
background-color: #bd4932;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#object{
width: 80px;
height: 80px;
background-color: #FFF;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
margin-right: auto;
margin-left: auto;
margin-top: 60px;
}
#-webkit-keyframes animate {
0% { -webkit-transform: perspective(160px); }
50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
#keyframes animate {
0% {
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
} 50% {
transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
} 100% {
transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}
/* SASU - Navigation Bar */
.nav_first{
overflow:none;
list-style-type:none;
margin:0;
padding:0;
text-align:center;
}
.nav_first li{
display:inline;
}
.nav_first a{
margin-top:25px;
font-size: 30px;
letter-spacing: 3px;
font-weight:900;
margin-left:40px;
margin-right:40px;
font-family: 'Montserrat';
text-decoration: none;
display:inline-block;
padding:10px;
}
.nav_first a:hover {
color:white;
font-size:35px;
}
#-webkit-keyframes wiggle {
0% {
-webkit-transform:rotate(4deg);
}
50% {
-webkit-transform:rotate(-4deg);
}
100% {
-webkit-transform:rotate(4deg);
}
}
.wiggle:hover {
-webkit-animation: wiggle 0.5s infinite;
}
.active {background-color:orangered;}
img{
float:left;
margin:0 auto;
padding:0 auto;
}
/* Middle Section */
.nike {
display: block;
margin:auto;
height:115px;
}
#nike_text {
font-family:'Montez';
font-size:80px;
text-align: center;
color:white;
margin:auto;
letter-spacing: 2px;
}