I'm trying to understand how perspective-origin affects vanishing points. I understand that the red square should vanish into the absolute center, but it appears to vanish towards the center-right instead. The lines would converge towards the center-right. I know I'm misunderstanding this somehow, but I don't know what I'm missing. I've read through whatever documentation I could find on this.
.container {
background: gray;
width: 200px;
height: 200px;
perspective: 50px;
perspective-origin: center center;
}
.contained {
background: red;
width: 100%;
height: 100%;
transform: rotateY(45deg);
transform-origin: center left;
opacity: .5;
}
<div class="container"><div class="contained"></div></div>
Related
I want to create an interface of this style with HTML & CSS : https://i.pinimg.com/originals/df/1c/11/df1c11c2ec58fce1e8c226bf85ca3a60.jpg
So far, I've got an interface that looks like this : https://i.ytimg.com/vi/B6vhIXDIdMc/maxresdefault.jpg
Those are illustrating pictures, but as you can see, my interface is not leaning as the one in the image. It does not have that "interface-on-a-screen" aspect, that I would like to recreate via CSS.
I tried using skew, but to no avail.
Do you know how I could recreate this effect ?
Thanks in advance.
The parameters can be adjusted by themselves.
div{
width: 300px;
height: 200px;
background: red;
margin: 100px auto;
text-align: center;
perspective: 400px;
}
img{
width: 300px;
height: 200px;
background: yellow;
display: inline-block;
transition: transform,0.8s;
transform-origin: center bottom;
}
img:hover{
transform: rotateX(-20deg) rotateY(-30deg) rotateZ(-20deg);
}
<div>
<img src="https://i.pinimg.com/originals/df/1c/11/df1c11c2ec58fce1e8c226bf85ca3a60.jpg"></img>
</div>
I am trying to position a <div> over a photograph of a TV on a wall, so it looks like the <div> is on the TV.
I am sure the solution is in using CSS 3D transforms and so perspective, perspective-origin, transform and transform-origin. However I can't work out values of these which achieve a good result because I'm using trial and error - I don't know the maths.
This is my progress:
And a jsfiddle of it: https://jsfiddle.net/2pye7nc2/
I am setting perspective on the container:
perspective: 500px;
perspective-origin: 210px 382px;
And transform on the element inside it:
transform: translateX(153px) translateY(253px) translateZ(0) rotateX(-12deg) rotateY(-31deg) rotateZ(-20deg);
transform-origin: 0px 150px;
Help is really appreciated.
The best I could do:
.tv .tv-content {
position: absolute;
top: 0;
left: 0;
opacity: 0.75;
width: 392px;
height: 356px;
transform: translateX(193px) translateY(211px) translateZ(0) rotateX(-11deg) rotateY(-40deg) rotateZ(-19.5deg);
transform-origin: 0px 150px;
line-height: 300px;
text-align: center;
font-size: 32px;
background-color: red;
color: blue;
}
https://jsfiddle.net/Lzf2umzf/
Will that help?
I am trying out the new features in css3 while i found that rotateY() and rotateX() is not giving expected results.
I have a single div in the page
<div id="element"></div>
This is the css
#element{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
top: 300px;
background-color: yellow;
transform: rotateY(45deg);
}
The blue shape is what i want and yellow is what i get
You need to add a container and give it perspevtive: 500px to get a 3D looking effect.
#container {
-webkit-perspective: 500px;
perspective: 500px;
}
#element {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
top: 10px;
background-color: yellow;
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
<div id="container">
<div id="element"></div>
</div>
You may want to complete your transform and perspective style rule:
jsfiddle demo
body{
-webkit-perspective:200px;
-moz-perspective:200px;
perspective:200px;
-webkit-perspective-origin:center 400px /* 300px + 200px/2 */;
-moz-perspective-origin:center 400px /* 300px + 200px/2 */;
perspective-origin:center 400px /* 300px + 200px/2 */;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#element{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
top: 300px;
background-color: yellow;
-webkit-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
transform: rotateY(45deg);
-webkit-transform-origin:center;
-moz-transform-origin:center;
transform-origin:center;
}
<div id="element"></div>
The parent of #element (not necessary <body>) has to have:
perspective so your browser knows how "far" the viewport is from #element, and render the rotation effect accordingly;
perspective-origin so your browser knows where the "center" of your viewport is;
The transform-style:preserve-3d do not seem to be necessary in this specific case, and IE doesn't support this feature yet. I just added it out of habit.
I'm trying to do a 3D rotation in CSS3 on a parent container...e.g. -webkit-transform: rotateY(30deg), but reverse the rotation on children e.g. -webkit-transform: rotateY(-30deg). I want the children to be "flat" from the viewer's perspective. When I apply the rotation on the child, something changes, i.e. it's rotating to some extent, but not correctly. I'm pretty sure my problem is either to do with the perspective-origin OR the transform-origin, but I can't quite work out how to set the values of either to solve it. I've created a fiddle to demonstrate the problem.
http://jsfiddle.net/bobsmells/ndn83/2/
Just to confirm, I want the child divs to still exist in the same 3D space, i.e. the one to the right should still appear smaller because it's further away, but I want both children to have no rotation.
<div class="grandparent">
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
.grandparent{
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 50% 50%;
}
.parent {
position: relative;
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotateY(30deg) ;
}
.child1 {
position: absolute;
top: 20px;
left: 20px;
background-color: green;
width: 50px;
height: 50px;
-webkit-transform: rotateY(-30deg) ;
}
.child2 {
position: absolute;
top: 20px;
left: 120px;
background-color: green;
width: 50px;
height: 50px;
-webkit-transform: rotateY(-30deg) ;
}
You have to set -webkit-transform-style: preserve-3d in the parent; if it is in the grand parent doesn't affect the children.
(Probably it should "cascade", but it just doesn't).
Once you do it, you will find that the children are invisible, because they are behind the parent, but that's another story. Make the parent semitransparent and you will see them.
I'm afraid I'm facing a render glitch in the current Firefox (24.0), while Chrome (30) renders the same code as expected.
Here's the code: http://dabblet.com/gist/6982745
HTML:
<div class="triangle"></div>
CSS:
.triangle {
height: 50%;
width: 40%;
position: relative;
top: 50px;
left: 50px;
background-color: black;
overflow: hidden;
/*
* Here comes the malicious line:
*/
transform: rotate(-18deg);
}
.triangle:before {
content: "";
width: 200%;
height: 300%;
position: absolute;
background-color: white;
transform-origin: left top;
transform: rotate(-52deg);
}
.triangle:after {
content: "";
width: 200%;
height: 300%;
position: absolute;
top: 38%;
background-color: white;
transform-origin: left top;
transform: rotate(26deg);
}
Basically, there's a black square (.triangle) which is partially covered by rotated white squares (:before and :after) to create a triangle. The black square itself is rotated by 18 degrees - which causes Firefox to render some kind of gray border around .triangle - even if the both white squares should cover every pixel in this area.
Chrome, as a reference, omits such a border.
A little experimenting showed me that the glitch only occurs with rotations other than 0°, 90°, 180° ...
My questions are: Am I doing something wrong? (I know that there are simpler ways to create a triangle - it's just a simplified example) Is there a known workaround for this glitch? I already tried box-shadow and border - both without success.
Thanks in advance :)