I'm trying to make different classes for alignment.
I want to be able to combine it like class="left bottom" using the transform:translate property.
The problem is that the property is being overridden by each other.
If you have a look at my fiddle and open up the debugger you will notice that translateX(50%) has been overridden by translateY(25%). Shouldn't they be combined like translate(50%,25%)?
.container {
background: gray;
height: 100px;
width: 100%;
}
.left {
transform: translateX(50%);
}
.bottom {
transform: translateY(25%);
}
<div class="container">
<div class="left bottom">
I should be aligned
</div>
</div>
https://jsfiddle.net/r2LmfqLs
This is perfectly correct, because you are changing the transform parameter.
You have to nest them:
.left.bottom {
transform: translateX(50%) translateY(25%);
}
Or combine them to one class:
.left-bottom {
transform: translateX(50%) translateY(25%);
}
No, there is only one transform property but two values, so which ever comes last...wins.
You could make one "combined" class...like so.
.container {
background:gray;
height:100px;
width:100%;
}
.left {
transform:translateX(50%);
}
.bottom {
transform:translateY(25%);
}
.left.bottom {
transform:translateX(50%) translateY(25%);
}
Related
I have a css div I want first to rotate at 180deg from the center origin and then rotate from -45deg from the "new" bottom left corner.
But I don't manage to apply two different rotations
https://imgur.com/a/9GSToEx -> So you can better understand
CSS
.player1{
background-color: blueviolet;
transform-origin: center;
transform: rotate(180deg);
transform-origin: bottom left;
transform: rotate(45deg);
}
HTML
<div class="player1">
<div class="questionSpace"></div>
</div>
Thank you ^^
This can be a bit tricky because of the need to move the origin and the rotations not being additive.
A fairly straightforward way of getting round the problem is to enclose the element in a parent whose sole purpose is to allow an independent 180deg rotation.
This snippet colors the player1 element with a linear-gradient so it can be seen that the 180deg rotation has taken place.
.player1container {
display: inline-block;
transform: rotate(180deg);
margin: 20vmin;
/* added just for demo */
}
.player1 {
background-color: blueviolet;
width: 20vmin;
height: 10vmin;
background-image: linear-gradient(red, blue);
transform: rotate(-45deg);
transform-origin: top right;
}
<div class="player1container">
<div class="player1">
<div class="questionSpace"></div>
</div>
</div>
Hmm. Your code is wrong, because this rules have conflict and last rule have more priority;
transform: rotate(180deg);
...
transform: rotate(45deg);
You need to use #keyframes
for example:
#rotate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform-origin: left;
transform: rotate(45deg);
}
}
and then you need to use animation: rotate;
This sample of rolling 3D cube does not work correctly on Internet Explorer.
There is must be rotation on 360 degrees like in other browsers.
Which of vendor prefixes are missing?
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
/* animation speed */
.container {
-webkit-animation: rotate 18s infinite linear;
animation: rotate 18s infinite linear;
}
/* native */
.cube { transform:scaleX(.7) scaleY(.7); }
* { margin:0; padding:0; outline:none; box-sizing: border-box; }
.stage { width:240px; height:360px; overflow:hidden; }
.cube {
width:240px;
height:400px;
margin-top:-20px;
-ms-perspective:1000px;
-webkit-perspective: 1000px;
perspective: 1000px;
-ms-perspective-origin: center center;
-webkit-perspective-origin: center center;
perspective-origin: center center;
}
.container {
display:block;
width: 240px;
height: 400px;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side {
display:block;
position: absolute;
width: 240px;
height: 400px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
.face1 {
-webkit-transform: translateZ(120px);
transform: translateZ(120px);
background-color: green;
}
.face2 {
-webkit-transform: translateX(120px) rotateY(90deg);
transform: translateX(120px) rotateY(90deg);
background-color: red;
}
.face3 {
-webkit-transform: translateZ(-120px) scale(-1, 1);
transform: translateZ(-120px) scale(-1, 1);
background-color: teal;
}
.face4 {
-webkit-transform: translateX(-120px) rotateY(90deg) scale(-1, 1);
transform: translateX(-120px) rotateY(90deg) scale(-1, 1);
background-color: black;
}
#-webkit-keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
#keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
</style>
</head>
<body cz-shortcut-listen="true">
<div class="stage">
<div class="cube">
<a class="container" href="">
<span class="face1 side"></span>
<span class="face2 side"></span>
<span class="face3 side"></span>
<span class="face4 side"></span>
</a>
</div>
</div>
</body></html>
Have a look here : https://caniuse.com/#search=perspective
As they say for perspective, it is partially supported by ie :
Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
You will have to use another method for ie.
Related post : Transform-Style preserve-3d in internet explorer CSS not working
Hope this help
As it is already suggested by other community member that transform-style preserve-3d is not supported in IE.
You can Work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
Reference:
Internet Explorer Preserve 3D fix
I'm trying to make a html page with a cube on it, each face of said cube would have buttons on it. On the default face all the buttons work fine, however, as soon as I rotate the cube the new face looses all interactivity.
HTML:
<button type="button" id="button">Toggle</button>
<hr>
<div id="cube">
<div class="face one"></div>
<div class="face two">
<button type="button">All</button>
<button type="button">News</button>
<button type="button">Media</button>
<button type="button">Events</button>
</div>
<div class="face three"></div>
<div class="face four"></div>
<div class="face five">
<button type="button">All</button>
<button type="button">News</button>
<button type="button">Media</button>
<button type="button">Events</button>
</div>
<div class="face six"></div>
</div>
CSS:
#cube {
position: relative;
height: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 360px;
background-color:#ffffff;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}
And JS:
$("#button").click(function () {
$('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(90deg)");
});
Here's a Fiddle link demonstrating my problem: http://jsfiddle.net/x66yn/
(Note that the demo will only work on webkit browsers.)
You need to give the elements a non-static position. This is because the elements are not currently positioned in their parent, with the parent being moved forward it covers the children
button {
position: relative; /* Or absolute, fixed */
}
Demo
Note: I added a cursor change on hover to show it works
The other option is to move the buttons forward in the Z direction greater than or equal to it's parent z-axis movement since you're doing so with the parent
button {
-webkit-transform: translateZ(200px); /* Equivalent or greater than parent's*/
transform: translateZ(200px);
}
Demo
In your case specifically, the back panel will not work just using the above, the angle of the right button also cannot be 90 (some some reason which I don't know for sure). It has to do with how the browser is rendering it. As a result, just use 89.999 which is indistinguishable to us but works fine
$("#buttonRight").click(function () {
$('#cube').css("-webkit-transform", "rotateX(0deg) rotateY(89.999deg)");
});
I had similar problem, but for me help remove from cube(DIV) this ruls: backface-visibility : hidden; and rotate cube by 89.99 (just two "9" after dot)
With this cube work in Chrome, Firefox, Safari and IE11
I want to align the bars to the bottom here: http://jsfiddle.net/7vdLV/67/
I tried using the following trick:
.graph { position: relative; }
.weekbar { position: absolute; bottom: 0; left: 0; }
However it breaks the graph, can anyone tell me how I should do it please in this scenario?
Tweaked the HTML a bit as well as the CSS and got this: http://jsfiddle.net/7vdLV/74/
<div class="graph">
<div class="weekbar"><div style="height: 10%;"></div></div>
<div class="weekbar"><div style="height: 20%;"></div></div>
<div class="weekbar"><div style="height: 30%;"></div></div>
<div class="weekbar"><div style="height: 40%;"></div></div>
</div>
As TylerH pointed out inline styles are considered bad practice so you would be better replacing them with classes i.e.
<div class="graph">
<div class="weekbar"><div class="h10"></div></div>
<div class="weekbar"><div class="h20"></div></div>
<div class="weekbar"><div class="h30"></div></div>
<div class="weekbar"><div class="h40"></div></div>
</div>
.h10 {
height: 10%;
}
Try transform:
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
http://jsfiddle.net/L4A2h/1/
Just replace the .graph class with the following code
.graph {
width: 100%;
height: 200px;
background-color: #eaeaea;
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Hope this Helps
Simplest solution:
apply
.weekbar{
position:relative;
display:inline-block;
top:50%; // height of biggest bar
}
Check this JSFiddle
Or if ancient browser support is not a big deal you can make use of the ::before element as follows:
.graph::before{
content:"";
display:block;
height:50%; // height of the biggest bar
}
.weekbar{
display:inline-block;
}
check this JSFiddle
Make these edits to your CSS:
.graph { position:relative; }
.weekbar { position: relative; top: 100%; left: 0; }
Is this what you were looking to do?
http://jsfiddle.net/4HEEk/
You can use position:relative; for the parent and position:relative; also for the child and calculate the top value by this jQuery code:
$(document).ready(function() {
var parentHeight = $('.graph').height();
$('.weekbar').each(function() {
var height = parentHeight - $(this).height();
$(this).css('top',height*100/parentHeight + '%');
});
});
Here is a working fiddle
I would change float for display:inline-block; then set an "invisible" resetter div at the start of your graph to make sure all the elements start from the bottom (rather from the bottom of the tallest line.
.weekbar {
width: 3.1%;
margin-left: -4px;
margin-right: 2%;
display:inline-block;
background-color: #aeaeae;
}
.resetter{
height:100%;
display:inline-block;
width:0;
margin-right:-4px;
}
Have a look at this JSFiddle.
Also on a note about inline style usage (dont do it!). If you know that you have a discrete number of heights (ie. in your example they are all multiples of 10) i would suggest creating classes for them.
I'm trying to create a cube with CSS. I actually think it's already there but I can't see it.
Feel free to edit the fiddle.
I don't understand why the perspective is not working.
Is this best practice?
Is it possible to rotate the cube as a whole??
Source: 24ways.
HTML:
<section class="container">
<div id="cube">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
</section>
CSS:
.container {
margin: 200px auto;
width: 200px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
}
#cube figure {
width: 198px;
height: 198px;
display: block;
position: absolute;
border: 1px solid #ddd;
background-color: rgba(0,0,0,0.2);
}
#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }
#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }
#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }
#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }
#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }
#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }
The problem could be that the hardware acceleration was not supported on your PC and it was on your mac... css3d transformations such as rotateX and rotateY require hardware accelerations.
in chrome go to your address bar and enter
chrome://gpu
you will see
3D CSS: Unavailable. Hardware acceleration disabled.
if this is the case then 3d cube is not visible.
Have a look at http://css3.bradshawenterprises.com/transforms/#transDemo3.
I have a wrapper around the cube that I rotate - in this case to keep it simple, I actually use three divs, one for X, one for Y and one for Z.
The playground underneath should show you how perspective etc work.
I used to work with a lot of 3D Transforms a while ago but recently noticed that CSS3 perspective does not have any effect on my web browsers including Chrome.
Tried the following and it helped in Google Chrome:
Navigate to "chrome://flags"
Find an item labeled "Override software rendering list" and disable it
Relaunch your browser
I know its a bit late but just in case it might help you...