Why is rotating element not showing? - html

Trying to create a rotating "card". The cover, inside-left, and inside-right all work fine. The back however is giving me issues. I applied the same rules to each panel so I don't know where the bug is coming from.
.scene {
margin-top: 10em;
margin-left: 20em;
width: 20em;
height: 20em;
perspective: 40em;
}
.cube {
width: 100%;
height: 100%;
position: relative;
animation: spinning 12s infinite;
transform-style: preserve-3d;
transform-origin: left;
}
#keyframes spinning {
from {
transform: translateY(5em) rotateY(0deg);
}
to {
transform: translateY(5em) rotateY(-360deg);
}
}
.front-left {
width: 60%;
height: 100%;
position: absolute;
line-height: 10em;
text-align: center;
transform-origin: left;
}
.panel-1 {
width: 100%;
height: 100%;
border-style: solid;
position: absolute;
backface-visibility: hidden;
}
.cover {
background-color: blue;
}
.left {
background-color: red;
transform: rotateY(180deg);
}
.right-back {
width: 60%;
height: 100%;
position: absolute;
line-height: 10em;
text-align: center;
transform: rotateY(130deg);
transform-origin: left;
}
.panel-2 {
width: 100%;
height: 100%;
border-style: solid;
position: absolute;
backface-visibility: hidden;
}
.end {
background-color: blue;
transform: rotateY(180deg);
}
.right {
background-color: red;
}
<div class="scene">
<div class="cube">
<div class="front-left">
<div class="panel-1 cover">cover</div>
<div class="panel-1 left">inner left</div>
</div>
<div class="right-back">
<div class="panel-2 end">back</div>
<div class="panel-2 right">inner right</div>
</div>
</div>
</div>
here is a fiddle of the code. https://jsfiddle.net/7xtv90as/
I suspect it might be because a transform is applied to the parent container but I am not sure.

Related

(CSS) How to create a 3d element within another 3d element with CSS transforms?

I am learning React JS and also brushing up on some CSS styling. I have a small app that is basically a drum machine that I wanted to style to look as a launchpad using 3D transformations and CSS. The algorithm itself works, so I made the body of the launchpad, but I also wanted to make 3D buttons for it which would visually sink in when interacted with (either on click or key down). But I can't figure out how to make the buttons into cuboids that go on top of the main cuboid (the drumpad). They just remain flat in the top plane of the launchpad cuboid.
Codesandbox
Relevant JSX code:
The launchpad itself:
return (
<div className="drum-container">
<div className="drum-body">
<div id="drum-machine" className="side top">
<div className="drum-header">
<span>Beat Pro X</span>
<span>{clipName}</span>
</div>
<div id="display">
{keys.map((element, index) => {
return (
<Drumpad
key={element}
clip={clips[index]}
pressKey={element}
onClick={handleDrumpadClick}
onKeyDown={handleDrumpadClick}
/>
);
})}
</div>
</div>
<div className="side bottom"></div>
<div className="side left"></div>
<div className="side right"></div>
<div className="side front"></div>
<div className="side back"></div>
</div>
</div>
);
The Drumpad element:
return (
<div className="drumpad-button">
<div
ref={drumpadRef}
id={props.clip.name}
className="dpad-side dpad-top"
onClick={playAudio}
>
<span className="drum-pad-key">{props.pressKey}</span>
<audio ref={audioRef} className="clip" src={props.clip.source} />
</div>
<div className="dpad-side dpad-bottom"></div>
<div className="dpad-side dpad-left"></div>
<div className="dpad-side dpad-right"></div>
<div className="dpad-side dpad-front"></div>
<div className="dpad-side dpad-back"></div>
</div>
);
CSS:
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
background-color: darkgrey;
}
#root {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.drum-container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid white;
border-radius: 4px;
height: 100%;
width: 100%;
perspective: 1500px;
perspective-origin: center;
}
.drum-body {
padding: 0;
margin: 0;
position: relative;
height: 700px;
width: 700px;
transform-style: preserve-3d;
transform: rotateX(-50deg);
}
.side {
border-radius: 15px;
position: absolute;
opacity: 0.9;
border: 2px solid white;
}
.front {
left: 100px;
top: 300px;
height: 100px;
width: 500px;
background-color: #d50000;
transform: translateZ(350px);
}
.back {
left: 100px;
top: 300px;
height: 100px;
width: 500px;
background-color: #aa00ff;
transform: translateZ(-350px);
}
.left {
top: 300px;
height: 100px;
width: 700px;
background-color: #304ffe;
transform: rotateY(90deg) translateZ(250px);
}
.right {
top: 300px;
height: 100px;
width: 700px;
background-color: #0091ea;
transform: rotateY(-90deg) translateZ(250px);
}
.top {
left: 100px;
height: 700px;
width: 500px;
background-color: #00bfa5;
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
left: 100px;
height: 700px;
width: 500px;
background-color: #64dd17;
transform: rotateX(-90deg) translateZ(50px);
}
#display {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
row-gap: 20px;
column-gap: 20px;
padding: 0;
border: 0;
width: 80%;
margin: 200px auto 100px auto;
}
.drumpad-button {
border: 2px solid black;
position: relative;
padding: 0;
height: 120px;
width: 120px;
transform-style: preserve-3d;
transform: rotateX(30deg);
}
.dpad-side {
border-radius: 2px;
position: relative;
opacity: 0.9;
border: 2px solid white;
}
.dpad-front {
height: 20px;
width: 120px;
background-color: #d50000;
transform: translateZ(60px);
}
.dpad-back {
height: 20px;
width: 120px;
background-color: #aa00ff;
transform: translateZ(-60px);
}
.dpad-left {
height: 20px;
width: 120px;
background-color: #304ffe;
transform: rotateY(90deg) translateZ(60px);
}
.dpad-right {
height: 20px;
width: 120px;
background-color: #0091ea;
transform: rotateY(-90deg) translateZ(60px);
}
.dpad-top {
height: 120px;
width: 120px;
background-color: darkgreen;
transform: rotateX(90deg) translateZ(10px);
}
.dpad-bottom {
height: 120px;
width: 120px;
background-color: #64dd17;
transform: rotateX(-90deg) translateZ(10px);
}
Drumpads are in a grid, so I've tried setting the grid as the basis for the transform-style: preserve-3d, thinking that the grid elements as its children would then treat the top face of the launchpad as the base plane, but maybe there's something else I am doing wrong?
But from my understanding preserve-3d should be set on the element containing the elements that make up the figure in 3D space. When I change translateZ values I can see different planes popping up, but for some reason preserve-3d is ignored. Is it because of the grid? Or maybe specifics of the JSX nesting of imported components?

How to avoid animated element expanding the page when it scales up

I want to place the css animation so it only shows partially on the page.
My problem is that it keeps expanding the page.
I have tried using overflow hidden on .ripple-background but this doesn't work. I have also tried using clip but I don't think this is the right solution unless I am using it wrong.
Can anyone shed some light for me please!
.ripple-background {
position: sticky;
z-index: -1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
height: 610px;
width: 610px;
margin-left: 60%;
margin-top: 50vh;
}
.circle {
position: absolute;
border-radius: 50%;
background: white;
animation: ripple 25s infinite;
box-shadow: 0px 0px 1px 0px #b1b1b1;
}
.small {
width: 100px;
height: 100px;
}
.medium {
width: 200px;
height: 200px;
}
.large {
width: 300px;
height: 300px;
}
.xlarge {
width: 400px;
height: 400px;
}
.xxlarge {
background-color: grey;
width: 500px;
height: 500px;
}
.shade1 {
opacity: 1;
}
.shade2 {
opacity: 0.5;
}
.shade3 {
opacity: 0.7;
}
.shade4 {
opacity: 0.8;
}
.shade5 {
opacity: 0.9;
}
#keyframes ripple {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.8);
}
}
<!-- Animation -->
<div class="ripple-background">
<div class="circle xxlarge shade1"></div>
<div class="circle xlarge shade2"></div>
<div class="circle large shade3"></div>
<div class="circle medium shade4"></div>
<div class="circle small shade5"></div>
</div>
<!-- Animation END-->

For overflow hidden to work, you need it to be on a parent container, with the content inside of it that you want to hide.
Below, I've created a wrapper and set it to be the size of the page.
* {
padding:0;
margin:0;
}
#wrapper {
width: 100vw;
height: 100vh;
overflow:hidden;
}
.ripple-background {
position: sticky;
z-index: -1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
height: 610px;
width: 610px;
margin-left: 60%;
margin-top: 50vh;
}
.circle {
position: absolute;
border-radius: 50%;
background: white;
animation: ripple 25s infinite;
box-shadow: 0px 0px 1px 0px #b1b1b1;
}
.small {
width: 100px;
height: 100px;
}
.medium {
width: 200px;
height: 200px;
}
.large {
width: 300px;
height: 300px;
}
.xlarge {
width: 400px;
height: 400px;
}
.xxlarge {
background-color: grey;
width: 500px;
height: 500px;
}
.shade1 {
opacity: 1;
}
.shade2 {
opacity: 0.5;
}
.shade3 {
opacity: 0.7;
}
.shade4 {
opacity: 0.8;
}
.shade5 {
opacity: 0.9;
}
#keyframes ripple {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.8);
}
}
<!-- Animation -->
<div id='wrapper'>
<div class="ripple-background">
<div class="circle xxlarge shade1"></div>
<div class="circle xlarge shade2"></div>
<div class="circle large shade3"></div>
<div class="circle medium shade4"></div>
<div class="circle small shade5"></div>
</div>
</div>
<!-- Animation END-->

How overlap an image over a circle?

This is the circular effect I trying to reproduce. There is a grey circle and a animated spinning red reticle when hover over the picture.
I try with border-radius but didnt work.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
width: 111px;
height: 111px;
border-radius: 100%;
background-color: black;
background-position: 0px -555px;
}
.bg-Black_Panther {
width: 73px;
height: 111px;
background-position: 0px -777px;
}
.bg-Black_Widow {
width: 73px;
height: 111px;
background-position: 0px -888px;
}
.bg-Bullseye {
width: 73px;
height: 111px;
background-position: 0px -999px;
}
.bg-Cable {
width: 73px;
height: 111px;
background-position: 0px -1110px;
}
.bg-Captain_America {
width: 73px;
height: 111px;
background-position: 0px -1221px;
}
.bg-Captain_Marvel {
width: 73px;
height: 111px;
background-position: 0px -1332px;
}
.bg-Carnage {
width: 73px;
height: 111px;
background-position: 0px -1443px;
}
<div class="container">
<div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
<div>
<i class="sprite bg-Black_Panther"></i>
<b>Black Panther</b>
</div>
<div>
<i class="sprite bg-Black_Widow"></i>
<b>Black Widow</b>
</div>
<div>
<i class="sprite bg-Bullseye"></i>
<b>Bullseye</b>
</div>
<div>
<i class="sprite bg-Cable"></i>
<b>Cable</b>
</div>
<div>
<i class="sprite bg-Captain_America"></i>
<b>Captain America</b>
</div>
<div>
<i class="sprite bg-Captain_Marvel"></i>
<b>Captain Marvel</b>
</div>
<div>
<i class="sprite bg-Carnage"></i>
<b>Carnage</b>
</div>
</div>

You should use two separate img with transparent png.
Also, using CSS from here endless rotation you may animate the red circle.
Here is a working example
body {
background-color: black;
}
.character-container img {
position: absolute;
}
.circle {
top: 50px;
left: 30px;
}
.character {
left: 37px;
top: 26px;
}
/* FROM https://stackoverflow.com/questions/6410730/how-to-do-a-webkit-css-endless-rotation-animation */
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 20s linear infinite;
-moz-animation: rotating 20s linear infinite;
-ms-animation: rotating 20s linear infinite;
-o-animation: rotating 20s linear infinite;
animation: rotating 20s linear infinite;
}
<div class="character-container">
<img class="circle rotating" src="data:image/png;base64,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">
<img class="character" src="data:image/png;base64,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">
</div>

Sorry I cleaned it up a bit before working on it but I think positioning is the way to go.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
position: absolute;
bottom: 0;
left: 5px;
z-index: 2;
}
.bg-Ant_Man {
width:80px;
height: 111px;
background-position: 0px -555px;
}
.single-hero {
width: 80px;
height: 80px;
background-color: black;
overflow: visible;
border-radius: 50%;
position: relative;
margin-top: 50px;
}
.single-hero:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
opacity: 0;
background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");
background-position: center center;
background-size: cover;
animation: rotate 1s infinite linear;
transition: opacity .2s ease-in-out;
}
.single-hero:hover:after {
opacity: 1;
}
#keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="container">
<div>
<div class="single-hero">
<div class="hero-figure bg-Ant_Man"></div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
</div>

You can create an additional wrapper around the image and make the position of inner image absolute with a negative top property to get this effect. Here is the code with just one item:
.container {
padding: 50px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: #333;
color: #fff;
}
.hero {
text-align: center;
}
.circle {
width: 90px;
height: 90px;
border-radius: 100%;
background-color: black;
text-align: center;
position: relative;
border: 1px solid #ddd;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
position: absolute;
top: -20px;
left: 10px;
width: 111px;
height: 111px;
background-position: 0px -555px;
}
<div class="container">
<div class="hero">
<div class="circle">
<i class="sprite bg-Ant_Man"></i>
</div>
<b>Ant-Man</b>
</div>
</div>
Fiddle: https://jsfiddle.net/abhas9/4veot6xf/12/

Pseudo elements are my beloved when need minor decorating.
body {
background-color: #333;
}
img {
display: inline-block;
position: relative;
z-index: 9999;
}
.portrait {
position: relative;
}
.portait:after {
content: '';
display: block;
border: 3px solid #666;
width: 77px;
height: 77px;
border-radius: 50px;
position: absolute;
top: 37px;
left: 22px;
}
<div class="portait">
<img src="https://ae01.alicdn.com/kf/HTB1VSHlRxjaK1RjSZFA762dLFXaO.png" alt="">
</div>

Try this:
.container div::before {
content: "";
display: block;
position: absolute;
width: 72px;
height: 72px;
background: black;
border-radius: 50%;
z-index: 0;
top: 36px;
border: 1px solid white;
}
.container div, .container div * {
position: relative;
}
.bg-Ant_Man {
border-radius: 0;
background-color: none;
}

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
position: absolute;
bottom: 0;
left: 5px;
z-index: 2;
}
.bg-Ant_Man {
width:80px;
height: 111px;
background-position: 0px -555px;
}
.single-hero {
width: 80px;
height: 80px;
background-color: black;
overflow: visible;
border-radius: 50%;
position: relative;
margin-top: 50px;
}
.single-hero:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
opacity: 0;
background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");
background-position: center center;
background-size: cover;
animation: rotate 1s infinite linear;
transition: opacity .2s ease-in-out;
}
.single-hero:hover:after {
opacity: 1;
}
#keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="container">
<div>
<div class="single-hero">
<div class="hero-figure bg-Ant_Man"></div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
</div>

CSS: backface-visibility not working?

I'm trying to create a card flipping effect, but I can't get the backface-visibility: hidden; working. What am I doing wrong?
.content {
width: 100%;
height: 70vh;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50px;
}
.card {
margin: 10px;
width: 300px;
height: 450px;
border: 1px solid black;
float: left;
position: relative;
left: 10%;
background-color: green;
transition: all 0.6s ease;
}
.card:hover {
transform: rotateY(180deg);
}
.front, .back {
width: 300px;
height: 450px;
position: absolute;
backface-visibility: hidden;
}
<div class="content">
<div class="card">
<div class="front">
<p>hello</p>
</div>
<div class="back">
<p>goodbye</p>
</div>
</div>
</div>

Instead of rotating the parent, you have to rotate the two sides individually.
.content {
width: 100%;
height: 70vh;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50px;
}
.card {
margin: 10px;
width: 300px;
height: 450px;
float: left;
position: relative;
left: 10%;
}
.front,
.back {
width: 300px;
height: 450px;
position: absolute;
backface-visibility: hidden;
transition-duration: 600ms;
border: 1px solid black;
}
.front {
background-color: green;
transform: none;
}
.back {
background-color: red;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: none;
}
<div class="content">
<div class="card">
<div class="front">
<p>hello</p>
</div>
<div class="back">
<p>goodbye</p>
</div>
</div>
</div>

http://jsfiddle.net/tj3eacxL/
Your original CSS is at the top. The necessary changes are:
.card {
-webkit-transform-style: preserve-3d;
background: none; /* Apply a background colour to the whole card to cover up the faces */
}
.back {
transform: rotateY(180deg); /* because the back should be flipped initially when it's in the back */
}
.front, .back {
background-color: green;
}

Here is a good example how do flip cards...
CSS:
.content {
perspective: 1000;
}
.content:hover .card {
transform: rotateY(180deg);
}
.content, .front, .back {
width: 300px;
height: 450px;
}
.front, .back {
border: 1px solid black;
background: green;
}
.card {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
.content:hover .card {
transform: rotateY(180deg);
}

Issue in transform property in CSS

I am trying to rotate a div which is inside another div. whats wrong with my code.I come across with another method(:before child) but whats wrong with this methods? Thanks
body {
background: #ccc
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2 {
position: relative;
}
.box1 {
transform: rotate3d;
position: absolute;
width: 20%;
height: 20px;
background-color: aqua;
}
<div class="box effect2">
<div class="box1"></div>
</div>

body {
background: #ccc
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2 {
position: relative;
}
.box1{
transition: 1.5s;
position: absolute;
width: 20%;
height: 20px;
background-color: aqua;
}
.box1:hover{
transform: rotate3d(1,-1, 1,60deg);
}
<div class="box effect2">
<div class="box1"></div>
</div>

Give x,y or z to rotate and add the value
body {
background: #ccc
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2 {
position: relative;
}
.box1 {
transform: rotateZ(45deg);
position: absolute;
width: 20%;
height: 20px;
background-color: aqua;
}
<div class="box effect2">
<div class="box1"></div>
</div>
Here are some posible values
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
SOURCE

rotate3d, where supported, needs parameters, example:
transform: rotate3d(1, 2.0, 3.0, 10deg)
body {
background: #ccc
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect2 {
position: relative;
}
.box1 {
transform: rotate3d(1,2.0,3.0,90deg);
position: absolute;
width: 20%;
height: 20px;
background-color: aqua;
}
<div class="box effect2">
<div class="box1"></div>
</div>

You need to adapt to different browsers.
.class {
-webkit-transform:rotate(deg);
-moz-transform:rotate(deg);
-o-transform:rotate(deg);
transform:rotate(deg);
}