I need to fold a squared div with vertex. I found some examples in Internet to fold edges in a squared div. Someone know how can I make this animation? This is an example in flash but I want the same in CSS3 and HTML5.
Thanks for your help.
this is the example: Adidas
for this simple HTML
<div id="base">
<div id="clip">
<div id="image">
</div>
</div>
</div>
you set this CSS:
div {
overflow: hidden;
-webkit-transform-style: preserve-3d;
}
#base {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
transition: all 0.3s;
}
#clip {
width: 290px;
height: 290px;
-webkit-transform: rotateZ(-45deg);
-webkit-transform-origin: 0px 0px;
}
#image {
width: 200px;
height: 200px;
-webkit-transform: rotateZ(45deg);
-webkit-transform-origin: 0px 0px;
background-image: linear-gradient(0deg, red, blue);
}
#base:hover {
-webkit-transform: rotate3d(1,1,0,-45deg);
-webkit-transform-origin: center center;
}
Starting from a base square div, you rotate an inner div 45deg. this div will clip the other thru the diagonal.
Inside this one, you set another div with the image, counter rotated 45 deg to keep the image horizontal.
And you set in the hover the base the div to rotate in 3d around the diagonal
demo
Related
I have two div elements: one parent element, which is rotated, and one child element that I need to be unaffected by the rotation of the parent element.
To achieve this, I have attempted to rotate the child element in the opposite direction of the parent element. This works in some cases. For instance, if I rotate the elements like this ...
.parent {
transform: rotate(30deg);
}
.child {
transform: rotate(-30deg);
}
... the child element will appear straight and undistorted. But if I rotate them with rotateX ...
.parent {
transform: rotateX(30deg);
}
.child {
transform: rotateX(-30deg);
}
... the child element still looks rather distorted.
The actual code uses both rotateX and rotateZ in order to make the parent element appear isometric. It currently looks like this:
.happy_parent {
width: 100px;
height: 100px;
background-color: green;
transform: rotate(30deg);
}
.happy_child {
width: 50px;
height: 50px;
background-color: yellow;
transform: rotate(-30deg);
}
.sad_parent {
width: 100px;
height: 100px;
background-color: green;
transform: rotateX(-60deg) rotateZ(45deg);
}
.sad_child {
width: 50px;
height: 50px;
background-color: yellow;
transform: rotateX(60deg) rotateZ(45deg);
}
<div class="happy_parent">
<div class="happy_child"></div>
</div>
<div class="sad_parent">
<div class="sad_child"></div>
</div>
Notice that the upper divs are both rendered correctly, but the lower child-div is still distorted.
What am I missing here?
It is not possible to have the innerElement (childElement) to remain in initial state when rotated in 3D by rotating back in -ve deg.
It will work when rotation takes place in 2D .
But you can give a try to transform-style: preserve-3d to see the shapes in 3D effect when rotated with Z coordinate also and preserve the shape instead of just showing in 2D .
You have to reverse the order of rotation too in 3D rotation
You can try to remove the transform-style: preserve-3d and see the effect
.happy_parent {
width: 100px;
height: 100px;
background-color: green;
transform: rotate(30deg);
}
.happy_child {
width: 50px;
height: 50px;
background-color: yellow;
transform: rotate(-30deg);
}
.sad_parent {
width: 100px;
height: 100px;
background-color: green;
transform: rotateX(-60deg) rotateZ(45deg);
transform-style: preserve-3d;
}
.sad_child {
width: 50px;
height: 50px;
background-color: yellow;
transform: rotateZ(-45deg) rotateX(60deg);
}
<div class="happy_parent">
<div class="happy_child"></div>
</div>
<br><br><br><br>
<div class="sad_parent">
<div class="sad_child"></div>
</div>
I'm trying to create an animated picture which contains a lot of layers.
In order to have images with right proportions on different screens I use cover css property value(I've tried it for both object-fit for images and background-size for background images). That's why my images on wide screen are croped by the browser.
The problem is that my layers are transformed(mostly rotated and moved) during the animation so there are moments when it is seen the cropped image.
Please see my example below.
How it can be prevented? Or it there some other technique?
body {
margin: 0;
padding: 0;
/*Just to imitate wide screen*/
width: 1000px;
height: 450px;
}
#container {
width: 100%;
height: 100vh;
/*Just to imitate wide screen*/
height: 100%;
overflow: hidden;
position: relative;
}
.layer {
height: 100%;
position: absolute;
width: calc(100% + 20px);
}
.layer img {
height: 100%;
width: 100%;
object-fit: cover;
}
.gulls {
animation: gulls ease-in-out 13s infinite alternate;
}
#keyframes gulls {
from {
transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
}
to {
transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
}
}
<div id="container">
<div class="layer">
<img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fsky.png?alt=media&token=25033588-d58c-4616-94e9-4974ec4157a4" alt="">
</div>
<div class="layer gulls">
<img src="https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2Fgulls5.png?alt=media" />
</div>
</div>
Currently I have this: https://jsfiddle.net/koljada/c08qdw1m/
first of all i have to say that your birds image is a lot bigger then the birds therself (many padding around) as i see the whole image is 2048/1934...
anyway, when you use
object fit:cover he crop;
the image for save the proportion. you can using
object-fit:scale-down;
for save the proportion by scale down the image until he come inside the parent space. i add a quick exemple about how it works down here:
hope it is what you search for..
Images can be cropped with a container div with overflow: hidden; position: relative, So you can position the image inside with position: absolute. The top and left css attribute of the image has to be set a negative value.
The image exact values can be found by using sine and cosine functions.
body {
margin: 0;
padding: 0;
/*Just to imitate wide screen*/
width: 200px;
height: 100px;
}
#container {
width: 100%;
height: 100vh;
/*Just to imitate wide screen*/
height: 100%;
overflow: hidden;
position: relative;
}
.layer {
height: 100%;
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 20px);
}
.layer img {
height: 150%;
width: 150%;
}
.gulls {
animation: gulls ease-in-out 3s infinite alternate;
}
#keyframes gulls {
from {
transform: rotate(3deg) scaleX(0.95) skew(-10deg, -10deg);
}
to {
transform: rotate(-3deg) scaleX(1.05) skew(10deg, 10deg);
}
}
<div id="container">
<div class="layer gulls">
<img src="http://via.placeholder.com/350x150/000000" />
</div>
</div>
You can use overflow: hidden; position: relative to crop your images after using container div, and using position: absolute at the images to place the image.
When working with hero images or full screen anything, I typically see text or images with the following bit of CSS:
.item {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
What is this code actually doing?
The reason why transform: translate(-50%, -50%) is required is because you want the center of the element to line up with the center of its parent. In simple terms, it can be boiled down to translateX(-50%) translateY(-50%), which means:
move me leftwards by 50% of my width, along the x-axis, and
move me upwards by 50% of my height, along the y-axis
This effectively moves the center of the element to its original top left corner. Remember then when you set left: 50%; top 50% on the element, you are moving its top left corner to the center of its parent (which means it is not visually centered at all). By moving the element back leftwards and upwards by half of its width and height respectively, you are sure that its center now aligns with the parent's center, making it visually horizontally + vertically centered.
As a proof of concept, see the code snippet below: hover over the parent to cause the child element's "ghost" to reposition itself by means of transform: translate(-50%, -50%):
body {
margin: 0;
padding: p;
}
.parent {
background-color: #ccc;
width: 100vw;
height: 100vh;
position: relative;
}
.child {
background-color: rgba(0,0,255,0.5);
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
}
.child::before {
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
content: '';
transition: all .5s ease-in-out;
}
body:hover .child::before {
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
TL;DR version
Let's say there is a .container and an .item inside.
This code below is positioning .item relatively to .container; meaning .item top left corner is in the center of its container
.item {
top: 50%;
left: 50%;
}
While the below is positioning .item relatively to its own width and height; meaning minus 50% of its width and height.
.item {
transform: translate(-50%, -50%);
}
If the two code snippets below are combined, then the expected center will show up.
I have a square with a rounded corner. I need to animate the rounded corner closing in on an image. The image must not move, so the animation would appear as if the circle is "swallowing" the image.
Html:
<div class="container">
<div class="circle"></div>
</div>
Css:
.container {
height: 200px;
width: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
.circle {
width: 200%;
height: 200%;
background-image: url(http://www.planwallpaper.com/static/cache/8a/e0/8ae0d4f7338822ba567adfc22c54f1b6.jpg);
background-size: 50% 50%;
background-repeat: no-repeat;
border-radius: 50%;
transition: 1s all ease-in-out;
position: relative;
}
.circle.closed {
width: 0%;
height: 0%;
margin-left: 100%;
margin-top: 100%;
}
Codepen: https://codepen.io/anon/pen/peLrBG
As you can see, the image shrinks with the circle. I need the image to have no movement. How can I achieve this? Also, is there a better way to achieve a square with a rounded corner effect? Thank you.
There is a clip-path CSS property that allows to achieve the desired effect.
.circle {
...
clip-path: circle(50% at center);
}
.circle.closed {
clip-path: circle(0 at center);
}
I have the following jsfiddle:
https://jsfiddle.net/quacu0hv/
I cant figure out how to center this div. The fact that it is rotated makes it hard to actually center the object on screen. How exactly can this be achieved with pure css? I imagine its due to the point of origin that changed its position (upper left vertex of the div).
div {
transform: rotate(-45deg) scale(2) translate(-50%, -50%);
opacity: 1 !important;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: black;
position: absolute;
}
Try rearranging the transform values and see what happens ;)
Turns out order does matter. If you think about it, it does makes sense:
Rotate > Scale > Translate
Once you've rotated it, the origin has been rotated too. That's why your square moves "left" and "up" from the origin.
Translate > Rotate > Scale
This is what you want to do. Position before you make any other adjustments that can affect the origin.
Use CSS transform-origin: 50% 50% or try 0 0. Remove position: absolute first.
This is at 0 0
This is at 50% 50%
This is at 45% -290% Centered?
Yeah, looks centered to me, see Full Page. Anyways, as you can see from the other answers transform-origin is the best solution. Scott suggested to remove the transform: -50% -50% which makes perfect sense if you wanted the div centered in the first place, but if you wanted that in there still and have it centered as a square in a rectangle (height is smaller than width), then 45% by -290%.
SNIPPET
.box {
position: relative;
}
.center {
transform: rotate(-45deg) scale(2) translate(-50%, -50%);
transform-origin: 45% -290%;
opacity: 1 !important;
width: 200px;
height: 200px;
background: black;
position: absolute;
}
<div class='box'>
<div class='center'></div>
</div>
You could just remove translate(50%, 50%);
div {
transform: rotate(-45deg) scale(2);
opacity: 1 !important;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background: black;
position: absolute;
}
<div></div>
Fiddle
or add transform-origin: 0 0; to start transformations in the upper left corner.
div {
transform: rotate(-45deg) scale(2) translate(-50%, -50%);
transform-origin: 0 0;
opacity: 1 !important;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background: black;
position: absolute;
}
<div></div>
Fiddle
Using transform-origin you can get the result, also scale and rotate goes before positioning.
div {
transform-origin: 0 0;
transform: rotate(-45deg) scale(2) translate(-50%, 50%);
opacity: 1 !important;
width: 100px;
height: 100px;
background: black;
}
<div></div>
jsfiddle: https://jsfiddle.net/quacu0hv/8/