See a fiddle to demonstrate my issue:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
}
http://jsfiddle.net/Lbq3K/
I would like to flip a div with the bottom line completely fixed throughout the movement. I've been googling around a lot, but couldn't find a solution. As you can see in the fiddle, when you hover your mouse over the div, the bottom line of the border moves away from the <hr> line at the bottom, and gets rotated back afterwards. I would like to have the rotation with a completely fixed bottom border, like I'd flip a calendar page. I've tried transform-origin to fix the rotation, but it apparently isn't working. Is there a way to do this just CSS?
if you put your transform origin on your DIV properties instead of in your DIV:hover it works.
In code:
use this:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
instead of this:
div:hover{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
div {
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
}
Have you ever heard about perspective-origin?
I'm not sure about it, but I think
div {
...
perspective-origin:100% 100%;
}
should work fine for you. My testing was successful.
perspective-origin defines the point from which the viewer is looking at the element.
Related
Im building an isometric grid of cubes created with css but im running into an issue with outlines.
Heres what I would like to achieve:
cube design
But heres what i've got so far:
html cube
I've tried the usual tricks like using some translateZ and backface visibility but to no avail.
My css is looking like this:
.cube {
transform: rotateX(55deg) rotateZ(45deg) translateX(50%) translateY(-50%);
transform-origin: 0% 0%;
transform-style: preserve-3d;
position: relative;
pointer-events:all;
transition: background-position ease 7s;
background-size: 400% 400%;
div {
position: absolute;
transition: background-position ease 7s;
backface-visibility: hidden;
&:first-child {
transform-origin: center top;
width: 100%;
height:100%;
transform: rotateX(-90deg);
top: 100%;
}
&:nth-child(2) {
transform-origin: left center;
width: 100%;
height: 100%;
left: 100%;
transform: rotateY(90deg);
}
}
Any ideas would be hugely appreciated.
codepen link
The trick here would be to have the faces of the cubes to overlap and use the background-blend-mode CSS attribute to have them blend into each other. That causes the cubes to blend into each other and get rid of the weird borders.
Working codepen link here: https://codepen.io/anon/pen/LXzWjJ
You might need to play around with the transforms and dimensions a bit to get the exact result you want.
It's not the best solution but it seems to work.
Hope this helps!
I need a line and should have an option to change the angle. The transform property works well but when the angle is increased the line size is decreased.
I need to retain the line size and should not be affected.
https://jsfiddle.net/4j8n45zz/
div {
width: 5px;
height: 220px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
<div></div>
The default transform-origin of the transformation is set on the middle of your <div>. So if you increase the angle the <div> will be rotate on the mid point and a part of your line is outside the site. To solve this you have to set the transform-origin to a corner ([top, bottom] [right, left]).
See the following example (https://jsfiddle.net/4j8n45zz/1/):
div {
display:block;
width:5px;
height: 220px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: bottom left;
}
<div></div>
So on my page here: dunnrite.co.uk/frame2 you will find under the "text design" header some patterns beneath the 5 solid blocks of colour. They are set as background images for divs. The problem is because I want those divs so small it clips a load off of the original image. How do I get it so that the image shown is more zoomed out to show off the pattern more?
My css was just
background-image:url("Images/pattern12.jpg");
Thanks,
Jonathan
Use the background-size CSS property, and probably you want to use the cover value, which ensures that the background completely covers your container, without distorting the image (if the aspect ratio differs, then clipping will occur).
You can also specify an explicit size for your background image, for example 45px as in your case.
The documentation for background-size can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I zoom in the element using the transform: scale(2,2); property.
here is demo link ..
http://jsfiddle.net/s3hWj/4/
<div class="wrap">
<div></div>
<p>hello</p>
</div>
html, body {
height: 100%;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
div.wrap > div {
position: absolute;
height: 100%;
width: 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
z-index: -1;
}
div.wrap:hover > div {
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}
I am trying to create a page layout with a rectangular div on the left side that's rotated 10 degrees, expands with the size of the browser, and doesn't show its edge on the top, left, and bottom. Meaning, the page should appear to be split in the middle on a slant.
My code so far creates the div properly, but when I expand the page you begin to see the edges.
http://jsfiddle.net/jpQvL/1/
HTML
<div id="wrapper">
<div id="right"></div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
position:relative;
height: 100%;
}
#right {
background: #000;
transition: all 0.5s ease-in-out 0s;
width: 50%;
position: fixed;
min-height: 110%;
transform: rotate(10deg);
top: -73px;
}
The problem is that the tranform property needs render prefixes. You have to add these lines:
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
take a look at this
or use one of many prefix-free scripts like this one
This should be a very simple problem you would think. I have a box with some title text that I want to rotate -90 degrees. I would like it to be absolutely positioned so that the end of the word is nudged into the top left corner. I can get this to align to the bottom easily enough, but the problem is that with variable length text it seems impossible to have it consistently stay within the container when aligning to the top because things like {top: 0} operate on the title before the transform. For my purposes this only needs work in Firefox. I can use javascript if that is the only solution, but you would think this could be done with just CSS.
You should use transform-origin to adjust the transformation point, along with some creative use of positioning properties.
http://jsfiddle.net/thirtydot/JxEfs/1/
CSS:
#box {
padding: 30px;
position: relative;
border: 1px solid blue;
}
#box > div {
border: 1px solid red;
position: absolute;
top: 0;
right: 100%;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: right top;
-moz-transform: rotate(270deg);
-moz-transform-origin: right top;
-ms-transform: rotate(270deg);
-ms-transform-origin: right top;
-o-transform: rotate(270deg);
-o-transform-origin: right top;
transform: rotate(270deg);
transform-origin: right top;
}
HTML:
<div id="box">
hello
<div>rotated!</div>
</div>
Can also work without right:100%
Just rotate 270 deg around left top and then translate it back at new 100% width.
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
http://jsfiddle.net/zW7SP/