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
Related
I was wondering why my background image is not repeating when I have background repeat set to repeat. I am using bootstrap, that is why there is a col-lg-6 there. I am a new to coding and I wanted to test my skills by making an exact copy of another website. This is the website. If you go to that, you can see exactly want I want.
.image-div {
overflow: hidden;
}
#float {
height: 100%;
width: 100%;
background:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px) rotate(-15deg) scale(1);
}
100% {
transform: translate(-400px, -600px) rotate(-15deg) scale(1);
}
}
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="image"></div>
</div>
One way of thinking of this is that there is a continuous scroll upwards on the image div, and then we rotate that div 15%.
First therefore we need to get a continuous scroll. This can be achieved by putting both a before and after pseudo element on the image div which have the required background. These then both get animated upwards, one starting at top: 0 one starting at top: 100%. That way the scroll is continuous - the after pseudo element follows up immediately after the before one.
So far so good, but when we rotate the image div, there are gaps where the parent div shows through. So we make the before and after pseudo elements twice the size in both directions, get their background images repeated and adjust their positions so they always cover the parent div. The parent is also given overflow: hidden so we don't see the extra bits.
Here is a working snippet. Note that the choice of having the background images 30% of width is arbitrary - change it to what you want.
Note also that the website that is to be copied has a bug, though minor. Every so often you see a slight jerk in the scrolling. We have overcome that problem here by having the two sets of background animate independently so as the second one gets to the top, the first takes on opacity 0 for a split second as it repositions itself back to the top. This fools us into thinking it's all continuous. That website has also put a 'sloping' white over part of the div but that was not part of the question asked here.
.container {
}
.image-div {
position: relative;
overflow: hidden;
}
#image {
position: absolute;
transform: rotate(-15deg) translateX(-25%) translateY(-25%);
height: 200%;
width: 200%;
overflow: hidden;
}
#image::before, #image::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-size: 30% auto;
background-image:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
z-index: 1;
}
#image::after {
top:100%;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px);
opacity: 1;
}
99.95% {
transform: translateY(-100%);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 0;
}
}
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="image"></div>
</div>
Try below code. Let me know if you succeed.
<style>
.image-div {
overflow: hidden;
}
#float {
height: 100%;
width: 100%;
background:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px) rotate(-15deg) scale(1);
}
100% {
transform: translate(-400px, -600px) rotate(-15deg) scale(1);
}
}
</style>
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="float"></div>
</div>
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!
How to bootstrap a site with horizontal CSS only parallax effect?
Requirements
CSS only parallax
parent layer must have width/height == 100vw/100vh
child layers must have width/height > 100vw/100vh
child layers must visually align 100% with parent layers width
by now the child layers technically do have 100% of parents width but due to the perspective they visually don't appear to take 100% of parents width
child layers (except the first) must have a top offset relative to its parent
results must base on calculations to have maximum flexibility
must be cross browser solid (at least newest version of majors)
What I have done so far
Actually this question is a follow-up question.
Here's a PEN with my current mockup state in SASS or CSS.
Working Simulated Example (jQuery)
In JavaScript its quite simple to achieve what I'm looking for. So here is a PEN that simulates the effect I'd like to mimic with CSS.
Already known Issues
The issue I'm most concerned about by now is the fact, that browser seem to render this scenario differently. See screenshot of browser window (chrome vs ff) scrolled to the right bottom corner below. But I hope this could be avoided.
There are so many parallax tutorials out there. Why is this different?
Actually I researched really a lot but didn't find not even one description how to implement horizontal parallax (means the child layers have a width > 100vw). Of course there are horizontal parallax scroll tuts out there. But they all have one in common: the child layer widths are always <= 100vw - and thats actually the difference.
html,
body {
height: 100%;
overflow: hidden;
width: 100%;
}
body {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
#projection {
-webkit-perspective: 1px;
perspective: 1px;
-webkit-perspective-origin: 0 0;
perspective-origin: 0 0;
height: 100%;
overflow: auto;
width: 100%;
}
.pro {
-webkit-transform: scale(1) translate(0px, 0px) translateZ(0px);
transform: scale(1) translate(0px, 0px) translateZ(0px);
height: 100%;
position: absolute;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}
.pro--1 {
-webkit-transform: scale(4) translate(0px, 0px) translateZ(-3px);
transform: scale(4) translate(0px, 0px) translateZ(-3px);
width: 110%;
}
.pro--2 {
-webkit-transform: scale(3) translate(0px, 1em) translateZ(-2px);
transform: scale(3) translate(0px, 1em) translateZ(-2px);
width: 110%;
}
.pro--3 {
-webkit-transform: scale(2) translate(0px, 2em) translateZ(-1px);
transform: scale(2) translate(0px, 2em) translateZ(-1px);
width: 110%;
}
.pro {
background: rgba(0, 0, 0, 0.33);
box-shadow: inset 0 0 0 5px orange;
color: orange;
font-size: 4em;
line-height: 1em;
text-align: center;
}
.pro--2 {
box-shadow: inset 0 0 0 5px green;
color: green;
}
.pro--3 {
box-shadow: inset 0 0 0 5px blue;
color: blue;
}
<div id="projection">
<div class="pro pro--1">pro--1</div>
<div class="pro pro--2">pro--2</div>
<div class="pro pro--3">pro--3</div>
</div>
I'm not 100% certain I've gotten exactly what you're targeting, but I've at least got a step forward for you. In this article on pure-css parallax sites, there was an update regarding working around webkit related bugs by using perspective-origin-x: 100% and transform-origin-x: 100%.
If I apply this in both x and y directions to your current mockup case with sass, I end up changing just #projection and .pro to be like this:
#projection
perspective: $perspective + 0px
perspective-origin: 100% 100%
height: 100%
overflow: auto
width: 100%
.pro
#include projection()
height: 100%
position: absolute
transform-origin: 100% 100%
transform-style: preserve-3d
width: 100%
And the parallax behavior starts to look much more like I might expect. Here is the final pen: https://codepen.io/kball/pen/qPbPWa/?editors=0100
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);
}
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/