I made an animation with CSS3, i've already do that in other page but this now don't work and i don't know why please help me! I don't see my mistake i have already test position : absolute but nothing.
This is my HTML:
<body>
<header id="header">
<nav>
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</nav>
</header>
</body>
and this my CSS3 :
#toggle {
width: 28px;
height: 30px;
float: left;
opacity: 0.5;
}
#toggle:hover{
opacity: 0.9;
}
#toggle div {
width: 100%;
height: 5px;
background: white;
margin: 4px auto;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
#toggle.on .one {
-webkit-transform: rotate(45deg) translate(5px, 5px);
-moz-transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on .two {
opacity: 0;
}
#toggle.on .three {
-webkit-transform: rotate(-45deg) translate(7px, -8px);
-moz-transform: rotate(-45deg) translate(7px, -8px);
}
#header{
position: fixed;
top: 0;
left: 0;
width: 80px;
height: 70px;
background-color: rgba(0,0,0, 0.9);
}
Thanx a lot for your answers !
If you want it to rotate when you click on them, use this:
#toggle .one:active {
-webkit-transform: rotate(45deg) translate(5px, 5px);
-moz-transform: rotate(45deg) translate(5px, 5px);
}
#toggle .two:active {
opacity: 0;
}
#toggle .three:active {
-webkit-transform: rotate(-45deg) translate(7px, -8px);
-moz-transform: rotate(-45deg) translate(7px, -8px);
}
Related
I have an image which on hover displays the title of a video. I want to be able to click after hovering and have my iframe show up. I have been able to simply put the vimeo player in to pop up, but whenever I want to put the iframe in, it doesn't work. I understand I can't wrap it inside the tag but I don't know another solution. Right now if you input the code, on hover the iframe appears. I want for it to not appear on hover, but appear when I click. Any help would be appreciated.
CODE:
<style>
.hoverfollow {
position: fixed;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 30%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
text-decoration: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-family: "DIN";
font-size: 10px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div {
font-family: "DIN", sans-serif !important;
margin: 0;
text-decoration: none;
}
header {
background: #009FDA none repeat scroll 0% 0%;
box-shadow: 0px 0px 4px rgba(84, 84, 84, 0.5);
padding: 5px 15px;
color: #fff;
text-align: center;
overflow: hidden;
}
header img {
height: 50px;
float: left;
}
header h1 {
text-transform: uppercase;
font-weight: 400;
font-size: 26px;
line-height: 48px;
}
.content h1,
.content h2,
.content h3 {
margin: 15px 0 0px 0;
}
.content {
max-width: 1200px;
margin: 50px auto 0 auto;
width: 100%;
}
pre {
background: #F2F2F2 none repeat scroll 0% 0%;
font-size: 15px;
padding: 10px;
border-radius: 3px;
margin: 10px 0;
white-space: pre-wrap;
-ms-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
footer {
background: #000;
color: #fff;
padding: 10px;
font-size: 13px;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
.align {
top: 5%;
left: 5%;
}
iframe {
width: 700px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
animation-name: fadeIn;
animation-duration: 4s;
}
#amaka {
width: 100%;
height: auto;
margin-top: 5%;
animation-name: fadeIn;
animation-duration: 4s;
}
</style>
<main>
<a class="align" href="test">
<div class="hvrbox align">
<img id="amaka" src="http://www.noscht.com/wp-content/uploads/2020/07/amaka.png" alt="AMAKA" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
AMAKA QUEENETTE - "SUFFOCATE"</div>
Remove the source attribute of your IFrame and only set it onClick
Give your IFrame a unique identifier so you can find it with document.getElementById().
<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
The IFrame should then have a source. You can set the source for example like this:
document.getElementById("myIframe").src = "https://yoursource.com"
Now add this code inside the onClick attribute to your element you want the user to click on.
onClick='document.getElementById("myIframe").src="https://yoursource.com"
So your full HTML could look like this:
<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
<p onClick="document.getElementById("myIframe").src="https://yoursource.com"">Click here</p>
.hoverfollow {
position: fixed;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 30%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
text-decoration: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-family: "DIN";
font-size: 10px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div {
font-family: "DIN", sans-serif !important;
margin: 0;
text-decoration: none;
}
header {
background: #009FDA none repeat scroll 0% 0%;
box-shadow: 0px 0px 4px rgba(84, 84, 84, 0.5);
padding: 5px 15px;
color: #fff;
text-align: center;
overflow: hidden;
}
header img {
height: 50px;
float: left;
}
header h1 {
text-transform: uppercase;
font-weight: 400;
font-size: 26px;
line-height: 48px;
}
.content h1,
.content h2,
.content h3 {
margin: 15px 0 0px 0;
}
.content {
max-width: 1200px;
margin: 50px auto 0 auto;
width: 100%;
}
pre {
background: #F2F2F2 none repeat scroll 0% 0%;
font-size: 15px;
padding: 10px;
border-radius: 3px;
margin: 10px 0;
white-space: pre-wrap;
-ms-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
footer {
background: #000;
color: #fff;
padding: 10px;
font-size: 13px;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
.align {
top: 5%;
left: 5%;
}
iframe {
width: 700px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
animation-name: fadeIn;
animation-duration: 4s;
}
#amaka {
width: 100%;
height: auto;
margin-top: 5%;
animation-name: fadeIn;
animation-duration: 4s;
}
#myIframe {}
<main>
<div class="hvrbox align">
<img id="amaka" src="http://www.noscht.com/wp-content/uploads/2020/07/amaka.png" alt="AMAKA" class="hvrbox-layer_bottom">
<a href="#">
<div onClick='document.getElementById("myIframe").src="https://player.vimeo.com/video/389137312"' class="hvrbox-layer_top"></div>
</a>
<div class="hvrbox-text">
AMAKA QUEENETTE - "SUFFOCATE"</div>
<iframe id="myIframe" onClick="https://player.vimeo.com/video/389137312" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</main>
I have modified a circular menu that I found on this pen
But I am having trouble rotating the menu items around the main circle. By default of this pen, the button's bottom part is perpendicular to it's relative position, but since I changed them with font icons, they look upside down or crooked.
I'm a CSS noob, so I need some help please, been at this for hours!
I've tried a couple of things like:
menu li::after{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
or something like
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
}
None of them seems to be working. Currently my component looks like this:
Here is my full CSS and HTML...
menu {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background-color: #2e7bbd;
margin: -45px 0 0 -45px;
position: fixed;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
right: 2%;
bottom: 2%;
z-index: 99999;
}
menu:before, menu:after {
content: "";
z-index: 2;
position: fixed;
width: 3px;
height: 22.5px;
cursor: pointer;
background-color: #fbfdff;
top: 50%;
left: 50%;
}
menu:before {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
menu:after {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
menu li {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
width: 59.4px;
height: 59.4px;
margin: -29.7px 0 0 -29.7px;
opacity: 0;
text-align: center;
font-size: 18px;
font-family: Helvetica, sans-serif;
font-weight: 100;
line-height: 59.4px;
color: #fbfdff;
border-radius: 50%;
background-color: #428dce;
list-style-type: none;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
}
menu li::after{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
animation-name: crazy;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
menu li li:nth-of-type(2) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu li li:nth-of-type(3) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu:hover {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
transition-delay: 0s;
}
menu:hover li {
transition-delay: 0.1s;
opacity: 1;
}
menu:hover li:nth-of-type(1) {
-webkit-transform: rotate(359deg) translate(0, 90px);
transform: rotate(359deg) translate(0, 90px);
}
menu:hover li:nth-of-type(2) {
-webkit-transform: rotate(310deg) translate(0, 90px);
transform: rotate(310deg) translate(0, 90px);
}
menu:hover li:nth-of-type(3) {
-webkit-transform: rotate(260deg) translate(0, 90px);
transform: rotate(260deg) translate(0, 90px);
}
<!--<menu>
<li><i className="fas fa-bell"></i></li>
<li><i className="fas fa-cog"></i></li>
<li><i className="fas fa-terminal"></i></li>
</menu>-->
<menu>
<li>1</li>
<li>2</li>
<li>3</li>
</menu>
EDIT: I don't know why the button looks like an ellipse in the code snippet, but let's ignore this for this argument's sake. It looks fine on my app :)
This has fixed your rotation problem. please check my code.
I have added after each li and set rotation in after, here is the code what I added.
menu li i{
content: "1";
display: flex !important;
align-items: center;
justify-content: center;
transform-origin: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 100%;
}
menu li:nth-of-type(1) i {
transform: rotate(180deg);
}
menu li:nth-of-type(2) i {
transform: rotate(230deg);
}
menu li:nth-of-type(3) i {
transform: rotate(280deg);
}
And this is your full code.
menu {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background-color: #2e7bbd;
margin: -45px 0 0 -45px;
position: fixed;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
right: 2%;
bottom: 2%;
z-index: 99999;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
menu:before, menu:after {
content: "";
z-index: 2;
position: fixed;
width: 3px;
height: 22.5px;
cursor: pointer;
background-color: #fbfdff;
top: 50%;
left: 50%;
}
menu:before {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
menu:after {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
menu li {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
width: 59.4px;
height: 59.4px;
margin: -29.7px 0 0 -29.7px;
opacity: 0;
text-align: center;
font-size: 18px;
font-family: Helvetica, sans-serif;
font-weight: 100;
line-height: 59.4px;
color: #fbfdff;
border-radius: 50%;
background-color: #428dce;
list-style-type: none;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
}
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
animation-name: crazy;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
menu li li:nth-of-type(2) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu li li:nth-of-type(3) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu:hover {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
transition-delay: 0s;
}
menu:hover li {
transition-delay: 0.1s;
opacity: 1;
}
menu:hover li:nth-of-type(1) {
-webkit-transform: rotate(359deg) translate(0, 90px);
transform: rotate(359deg) translate(0, 90px);
}
menu:hover li:nth-of-type(2) {
-webkit-transform: rotate(310deg) translate(0, 90px);
transform: rotate(310deg) translate(0, 90px);
}
menu:hover li:nth-of-type(3) {
-webkit-transform: rotate(260deg) translate(0, 90px);
transform: rotate(260deg) translate(0, 90px);
}
menu li i{
content: "1";
display: flex !important;
align-items: center;
justify-content: center;
transform-origin: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 100%;
}
menu li:nth-of-type(1) i {
transform: rotate(180deg);
}
menu li:nth-of-type(2) i {
transform: rotate(230deg);
}
menu li:nth-of-type(3) i {
transform: rotate(280deg);
}
And here is the HTML
<menu>
<li><i class="fas fa-bell"></i></li>
<li><i class="fas fa-cog"></i></li>
<li><i class="fas fa-terminal"></i></li>
</menu>
menu {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background-color: #2e7bbd;
margin: -45px 0 0 -45px;
position: fixed;
width: 30px;
height: 70px;
border-radius: 50%;
cursor: pointer;
right: 2%;
bottom: 2%;
z-index: 99999;
}
menu:before, menu:after {
content: "";
z-index: 2;
position: fixed;
width: 3px;
height: 22.5px;
cursor: pointer;
background-color: #fbfdff;
top: 50%;
left: 50%;
}
menu:before {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
menu:after {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
menu li {
transition: all 0.25s ease-in-out;
transition-delay: 0.75s;
width: 59.4px;
height: 59.4px;
margin: -29.7px 0 0 -29.7px;
opacity: 0;
text-align: center;
font-size: 18px;
font-family: Helvetica, sans-serif;
font-weight: 100;
line-height: 59.4px;
color: #fbfdff;
border-radius: 50%;
background-color: #428dce;
list-style-type: none;
position: fixed;
z-index: 100;
left: 50%;
top: 50%;
}
menu li::after{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
menu li li:nth-of-type(1) {
-webkit-transform: rotate(180deg) translate(0, 0);
transform: rotate(180deg) translate(0, 0);
animation-name: crazy;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
menu li li:nth-of-type(2) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu li li:nth-of-type(3) {
-webkit-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
menu:hover {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
transition-delay: 0s;
}
menu:hover li {
transition-delay: 0.1s;
opacity: 1;
}
menu:hover li:nth-of-type(1) {
-webkit-transform: rotate(359deg) translate(0, 90px);
transform: rotate(359deg) translate(0, 90px);
}
menu:hover li:nth-of-type(2) {
-webkit-transform: rotate(310deg) translate(0, 90px);
transform: rotate(310deg) translate(0, 90px);
}
menu:hover li:nth-of-type(3) {
-webkit-transform: rotate(260deg) translate(0, 90px);
transform: rotate(260deg) translate(0, 90px);
}
li a {
transform :rotate(180deg);
display:block;
}
<menu>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</menu>
wrap your list content in a block element or inline element like i did! and rotate this element 180deg!
This will fix your rotation problem.
li a {
transform :rotate(180deg);
}
Also if you need a proper circular design for + icon, you need to fix width and height for .menu class in CSS as follow:
width: 30px;
height: 70px;
I currently have a problem developing an animation.
The point is that I have a big DIV within a smaller DIV that is absolutely positioned. The big DIV is initially hidden and should be displayed with a rotate-X animation when a certain action is performed.
However, during the rotate animation the DIV is cut off and is only displayed completely after the animation.
The same thing happens when the hide animation is played.
With Firefox the DIV is always clipped.
With Chrome the clipping only occurs while the animation ist playing.
The overflow: hidden of the .super-parend DIV is required unfortunately.
Does anyone know a work around for this problem?
$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});
.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
perspective: 800px;
perspective-origin: 50% 50%;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
#-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
#keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">
I think I found the solution myself:
The perspective: 800px in the .parent div seems to be responsible for the clipping.
When I move the perspective property to the body, the div is fully shown.
$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});
body {
perspective: 800px;
}
.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
/* perspective: 800px; */
perspective-origin: 50% 50%;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(-1deg) translateX(-50%);
transform: rotateX(-1deg) translateX(-50%);
opacity: 1
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(-1deg) translateX(-50%);
transform: rotateX(-1deg) translateX(-50%);
opacity: 1
}
}
#-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
#keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">
Are you allowed to change the html structure? Seems everything works if: 1) - div.parent has absolute position and no more children and 2) - there is a super parent div with relative position.
$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});
.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.super-super-parent {
position: relative;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
perspective: 800px;
perspective-origin: 50% 50%;
position: absolute;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
#-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
#keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-super-parent">
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
<div class="one-more-child">
<p>test text</p>
<p>test text</p>
<p>test text</p>
<p>test text</p>
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">
Can someone help me figure out how to add my upload image code and text input to the page 1 right below the Header and paragraph. When I add it, it stays stuck at the top of the page. I have the code below and an image of the issue. We are supposed to add on different pieces to this web page design for an assignment and I'm new to html so I'm struggling with how to fix this issue.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>The Title</title>
<meta name="viewport" content="width=device-width">
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
Page 1
<input type="radio" name="radio-set" id="st-control-2"/>
Page 2
<input type="radio" name="radio-set" id="st-control-3"/>
Page 3
<input type="radio" name="radio-set" id="st-control-4"/>
Page 4
<input type="radio" name="radio-set" id="st-control-5"/>
Page 5
<div class="st-scroll">
<!-- Placeholder text from http://hipsteripsum.me/ -->
<section class="st-panel" id="st-panel-1">
<div class="st-deco" data-icon=""></div>
<h2>P1</h2>
<p>here is the paragraph.</p>
<p1> Please upload an image/txt.</p>
<div class = "main_container">
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
</form>
<input type="text" name="What would you like to create?">
Let's get started!
</center>
</div>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-deco" data-icon=""></div>
<h2>P2</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-deco" data-icon=""></div>
<h2>P3</h2>
<p>Sint aute occaecat id vice. Post-ironic pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-deco" data-icon=""></div>
<h2>P4</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-deco" data-icon=""></div>
<h2>P5</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div><!-- // st-scroll -->
</div><!-- // st-container -->
</div>
</body>
</html>
CSS
#import url('//fonts.googleapis.com/css?family=Josefin+Slab:400,700');
body {
overflow: hidden;
}
/* Main container where upload img and text input is */
.main_container{
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
a {
text-decoration: none;
}
.st-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
.st-container > input,
.st-container > a {
position: fixed;
bottom: 0px;
width: 20%;
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 34px;
}
.st-container > input {
opacity: 0;
z-index: 1000;
}
.st-container > a {
z-index: 10;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before {
content: '';
position: fixed;
width: 100%;
height: 34px;
background: #e23a6e;
z-index: 9;
bottom: 0;
}
#st-control-1, #st-control-1 + a {
left: 0;
}
#st-control-2, #st-control-2 + a {
left: 20%;
}
#st-control-3, #st-control-3 + a {
left: 40%;
}
#st-control-4, #st-control-4 + a {
left: 60%;
}
#st-control-5, #st-control-5 + a {
left: 80%;
}
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #821134;
}
.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
bottom: 100%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #821134;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
.st-container > input:hover + a{
background: #AD244F;
}
.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}
.st-scroll,
.st-panel {
position: relative;
width: 100%;
height: 100%;
}
.st-scroll {
top: 0;
left: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.st-panel{
background: #fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
/* Content elements */
.st-deco{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -100px;
background: #fa96b5;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontAwesome';
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 90px;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
-webkit-transform: rotate(-45deg) translateY(25%);
-moz-transform: rotate(-45deg) translateY(25%);
-o-transform: rotate(-45deg) translateY(25%);
-ms-transform: rotate(-45deg) translateY(25%);
transform: rotate(-45deg) translateY(25%);
}
.st-panel h2 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
font-size: 54px;
font-weight: 900;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
margin: -70px 0 0 0;
padding: 0;
top: 50%;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#-webkit-keyframes moveDown{
0% {
-webkit-transform: translateY(-40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
#-o-keyframes moveDown{
0% {
-o-transform: translateY(-40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
#-ms-keyframes moveDown{
0% {
-ms-transform: translateY(-40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
#keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.st-panel p {
position: absolute;
text-align: center;
font-size: 16px;
line-height: 22px;
color: #8b8b8b;
z-index: 2;
padding: 0;
width: 50%;
left: 25%;
top: 50%;
margin: 10px 0 0 0;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
#-webkit-keyframes moveUp{
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#-moz-keyframes moveUp{
0% {
-moz-transform: translateY(40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
#-o-keyframes moveUp{
0% {
-o-transform: translateY(40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
#-ms-keyframes moveUp{
0% {
-ms-transform: translateY(40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
#keyframes moveUp{
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
/* Colored sections */
.st-color,
.st-deco{
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color .st-deco {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: #fff;
color: rgba(255,255,255,0.8);
}
#media screen and (max-width: 520px) {
.st-panel h2 {
font-size: 42px;
}
.st-panel p {
width: 90%;
left: 5%;
margin-top: 0;
}
.st-container > a {
font-size: 13px;
}
}
#media screen and (max-width: 360px) {
.st-container > a {
font-size: 10px;
}
.st-deco{
width: 120px;
height: 120px;
margin-left: -60px;
}
[data-icon]:after {
font-size: 60px;
-webkit-transform: rotate(-45deg) translateY(15%);
-moz-transform: rotate(-45deg) translateY(15%);
-o-transform: rotate(-45deg) translateY(15%);
-ms-transform: rotate(-45deg) translateY(15%);
transform: rotate(-45deg) translateY(15%);
}
}
Take a look to your HTML, and I've just put your input under new div and added margin to him:
<div style="position: absolute; margin-top: 50%; margin-left: 35%">
And at all it looks like this:
<p>here is the paragraph.</p>
<div style="position: absolute; margin-top: 50%; margin-left: 35%">
<p1> Please upload an image/txt.</p>
<div class = "main_container">
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
</form>
<input type="text" name="What would you like to create?">
Let's get started!
</div></div>
Answers above are great. A hint to figuring out these things is right click on the element and select "Inspect" then you can see all the values affecting layout and where in the css they are getting set.
it is understandable when you are new, things such as this may be hard to notice. I may be wrong, however, it is because of something called specificity that your code is not behaving the way it is supposed to.
Your "main_container" class is being affected by its parent div element with the class of "st-container" to which you have positioned in the top left corner. If you were to use the css selector for "main_container" and change its position, its specificity would override the "st-container".
Alright, so I have two problems, the first problem is that I want the animation to rotate over the X-axes, but it looks weird, because it's not spinning inside each other, Fiddle
Then my other problem is, when I add something like scale(1.5) to the transform animation, it just seems to ignore the rotation, it just won't work anymore.
HTML
<div class="coin-wrapper">
<div class="animate coin">
<div class="terrorist"></div>
<div class="counter-terrorist"></div>
</div>
</div>
CSS
.animate{
animation: rotate 5s;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateX(2160deg);
-moz-transform: rotateX(2160deg);
transform: rotateX(2160deg);
}
}
.coin-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.coin .counter-terrorist, .coin .terrorist {
position: absolute;
width: 200px;
height: 200px;
}
.coin .terrorist {
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/terrorist.png');
background-size:cover;
}
.coin .counter-terrorist {
transform: rotateY(180deg);
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
background-size:cover;
}
The height of the .coin element is being calculated as 0, so that's where the transform-origin is. If you make the coin fill its parent, then it looks good. You can work around the scaling problem by applying scale to the wrapper instead of the coin.
.animate{
animation: rotate 5s;
}
.coin-wrapper {
animation: scale 5s;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateX(2160deg);
-moz-transform: rotateX(2160deg);
transform: rotateX(2160deg);
}
}
#-webkit-keyframes scale {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
}
.coin-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.coin {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.coin .counter-terrorist, .coin .terrorist {
position: absolute;
width: 200px;
height: 200px;
}
.coin .terrorist {
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/terrorist.png');
background-size:cover;
}
.coin .counter-terrorist {
transform: rotateY(180deg);
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
background-size:cover;
}
<div class="coin-wrapper">
<div class="animate coin">
<div class="terrorist"></div>
<div class="counter-terrorist"></div>
</div>
</div>