I am some time trying to make a complicated effect on the image, I made some attempts however not got it. I need this effect only in css without using javascript.
CSS
.container{
width: 500px;
background-color: #0c2f45;
}
.image-container {
background-color: #194c6e;
width: 266px;
}
.image-container img{
width: 250px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
jsfiddle
You could achieve something like this through a couple of transformed pseudo elements*. By skewing the two pesudos, you can create the triangular effect.
A quick demo would be:
div {
height: 200px;
width: 300px;
background: url(http://lorempixel.com/300/200);
position: relative;
overflow: hidden;
}
div:before,
div:after {
content: "";
position: absolute;
height: 50%;
width: 20%;
background: tomato;
border-left: 10px solid firebrick;
left: 80%;
}
div:before {
top: 0;
transform: skewX(10deg);
}
div:after {
top: 50%;
transform: skewX(-10deg);
}
<div></div>
* this would assume you wish to have a solid colour on the right hand side
Related
I'm trying to fill this nos bottle then slowly empty it up with css so first the "fill" goes up then slowly slowly drains down, I tried but came with a very terrible result
#bottle, #fill {
position: fixed;
top: 50%;
left: 50%;
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
animation: fill 1s cubic-bezier(0, 1.62, 0.27, -0.67) infinite;
z-index: -1;
}
#keyframes fill {
from {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
to {
top: -50px;
transform: translateX(-50%) rotate(360deg);
}
}
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
If anyone could point how can i achieve this would be awesome.
You can try something like that, but you should consider just left backgroung transparent inside bottom image, outside put a solid color, like black.
#bottle, #fill {
top: 50%;
left: 50%;
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
animation: fill 7s cubic-bezier(1, 2.7, 1, -1.7) infinite;
z-index: -1;
}
#keyframes fill {
from {
top: 450px;
transform: translateX(-50%) rotate(0deg);
}
to {
top: -50px;
transform: translateX(-50%) rotate(360deg);
}
}
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
I'm not absolutely sure what effect you want, but one thing to notice is that you can have the filling and the emptying all in the same animation, without necessarily needing to involve a cubic Bezier function, which in this case seemed to partly fill the bottle, then empty then partly fill but to a different level.
Simplifying things but introducing more detail into the keyframes here's an example of the bottle filling much faster than it empties, by having the percentage of the animation used for filling as much smaller than the emptying.
There are of course many variations on this which can be achieved by having the percentages differ. Also you could reintroduce a cubic Bezier to make the movement less uniform, but that's for your experimentation as I don't know exactly what final effect is wanted.
<head>
<style>
#bottle, #fill {
/* position: fixed; NOTE. had to change this position fixed to absolute get it to line up on Stack Overflow. Outside SO it was fine as fixed */
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - 50px);
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
/* animation: fill 20s cubic-bezier(0, 1.62, 0.27, -0.67) infinite; */
animation: fill 20s linear infinite;
z-index: -1;
animation-fill-mode: forwards; /* added */
}
#keyframes fill {
0% {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
10% {
top: -50px;
top: 75px;
transform: translateX(-50%) rotate(360deg);
}
20% {
top: 75px;
transform: translateX(-50%) rotate(0deg);
}
22% {
top: 75px;
transform: translateX(-50%) rotate(0deg);
}
80% {
transform: translateX(-50%) rotate(360deg);
}
100% {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
</body>
Note: in the SO snippet system the position fixed had the effect of separating the blob (liquid) from the bottle - it was fine when the code was just run as it was outside the SO system. To demo it here I have made the bottle position absolute and centered the bottle and blob, just so you can get an idea while here. You can remove the absolute and go back to fixed outside SO.
I have fitted an image into a frame with CSS for a certain size but want this be fully responsive. In a CSS3 world of Flexbox and loads of options with transforms. How can i ensure this image stays within the rotated frame at all sizes, perhaps using some newer CSS properties?
.main {
position:relative;
}
.insert {
/* max-height: 300px; */
position: absolute;
bottom: 19%;
height: 110px;
width: 110px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
left: 13.5%;
}
<div class="main">
<img class="holder" style="max-height:300px" src="https://s15.postimg.cc/5fpragxnv/holder.jpg">
<img class="insert" style="max-height:300px" src="https://s15.postimg.cc/h4tqygyx7/insert.jpg">
</div>
Here is the JSFiddle
Try this,
instead of left in % use left in vh for .insert
.main {
position:relative;
}
.insert {
position: absolute;
bottom: 19%;
height: 110px;
width: 110px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
left: 26vh;
}
I am trying to make a simple cube in CSS using a before and after pseudo selector.
This however leaves a slight gap between the top of the cube and the sides where you can see the magenta background through the cube.
body{background:magenta;perspective: 300000;}
div{
width:100px;
height:100px;
background:yellow;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}
/* Right */
div:after {
background: #c5c500;
transform: rotateX(-90deg);
transform-origin: 100% 0%;
top: 100%;
width: 100%;
height: 100px;
content: '';
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
}
/* Left */
div:before {
background: #f3f370;
transform: translateZ(-100px) rotateY(-90deg);
transform-origin: 0 100%;
width: 100px;
height: 100%;
content: '';
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
}
You can see this in action in this fiddle http://jsfiddle.net/04ggen30/
How can I get rid of this gap so that the background is not visible through the cube?
It aren't really gaps.
In the border, there are pixels where the element only covers a fraction of the pixel. The antialiasing blends the color of the element with the color of the background. Repeat this for the other face of the cube, covering also part of the pixel, and there is still a small contribution of the background to the result.
You can solve it if you set 3 divs in the HTML, one for each face.
Now, you can use pseudo elements, moved 1px inside the cube, to make it more opaque
body{background:magenta;perspective: 300000;}
div{
width:100px;
height:100px;
background:yellow;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}
.right {
background: #c5c500;
transform: rotateX(-90deg);
transform-origin: 100% 0%;
top: 100%;
width: 100%;
height: 100px;
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
}
.left {
background: #f3f370;
transform: translateZ(-100px) rotateY(-90deg);
transform-origin: 0 100%;
width: 100px;
height: 100%;
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
}
.right::after, .left:after {
content: '';
top: 0px;
width: inherit;
height: inherit;
position: absolute;
background: inherit;
transform: translateZ(-1px);
}
<div>
<div class="right"></div>
<div class="left"></div>
</div>
Another posibility using shadows and a single element
body{background:magenta;perspective: 300000;}
div{
width:100px;
height:100px;
background:yellow;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-45deg) translateX(50px) translateY(100px);
}
/* Right */
div:after {
background: #c5c500;
transform: rotateX(-90deg);
transform-origin: 100% 0%;
top: 100%;
width: 100%;
height: 100px;
content: '';
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
box-shadow: 0px -1px 0px 0px #c5c500;
}
/* Left */
div:before {
background: #f3f370;
transform: translateZ(-100px) rotateY(-90deg);
transform-origin: 0 100%;
width: 100px;
height: 100%;
content: '';
position: absolute;
backface-visibility: hidden;
background-clip:content-box;
box-shadow: 1px 1px 0px 0px #f3f370;
}
<div></div>
I just changed the width: 101px; to both before and after elements. You can see this fiddle http://jsfiddle.net/04ggen30/2/. Or you can change the transform property with transform: translateZ(-99px) rotateY(-90deg); just decreased translateZ from -100px to 99px.
Can I transform: rotateY a div to counter the transform: rotateY of his parent ?
For example: if I have a parent div with rotateY(-45deg), all his childrens will be -45deg. Why can't I add rotateY(45deg) to the children to make it look like no rotation affected it?
Demo: http://jsfiddle.net/eBT4A/
You can add rotateY(45deg) to the children where parent div have rotateY(-45deg), to make it look like no rotation affected it only when you set same pivot point to these two rotation,
in your demo example you have not apply same pivot point,
Try this...
<html>
<head>
<style type="text/css">
body {
-webkit-perspective: 500;
}
#content {
position:absolute;
top: 0px;
left: 0px;
width: 300px;
height: 500px;
background: #000;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(45deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(45deg);
}
#element {
position:absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #f00;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="content">
<div id="element"></div>
</div>
</body>
</html>
You need to add preserve-3d to the parent:
body {
-webkit-perspective: 500;
}
#content {
position:fixed;
top: 20px;
left: 0;
width: 300px;
height: 500px;
background: #000;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(45deg);
-webkit-transform-style: preserve-3d;
}
#element {
position:fixed;
top: 20px;
left: 50%;
width: 50px;
height: 50px;
background: #f00;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(-45deg);
}
updated fiddle
As far as I know, that won't work in IE.
This question already has answers here:
Responsive CSS Trapezoid Shape
(2 answers)
Closed 3 years ago.
Does anyone know how to achieve skew like this:
Using CSS's new transform property?
As you can see I'm trying to skew both corners, anyone know if this is possible?
.red.box {
background-color: red;
transform: perspective( 600px ) rotateY( 45deg );
}
Then HTML:
<div class="box red"></div>
from http://desandro.github.com/3dtransforms/docs/perspective.html
CSS:
#box {
width: 200px;
height: 200px;
background: black;
position: relative;
-webkit-transition: all 300ms ease-in;
}
#box:hover {
-webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after, #box:before {
display: block;
content: "\0020";
color: transparent;
width: 211px;
height: 45px;
background: white;
position: absolute;
left: 1px;
bottom: -20px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
#box:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
}
HTML:
<div id=box></div>
Works in Chrome and FF 4: http://jsfiddle.net/rudiedirkx/349x9/
This might help: http://jsfiddle.net/rudiedirkx/349x9/2880/
And this too (from Erwinus' comment): http://css-tricks.com/examples/ShapesOfCSS/
I think you mean webkit transform.. please check this URL out
http://www.the-art-of-web.com/css/3d-transforms/ it could help you.
You can use -webkit-perspective and -webkit-transform together.
<div style="-webkit-perspective:300;">
<div style="-webkit-transform:rotate3d(0, 1, 0, 30deg);width:200px;height:200px;background:#D73913;"></div>
</div>
This works only in Safari.
Use this css code. Set the numbers according to your need
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
Just in case you want, use matrix 3d.
transform:matrix3d(
1,0,1,0.003,
0,1,0,0,
0,0,1,0,
0,0,0,1);
http://codepen.io/Logo/pen/jEMVpo
.size{
width: 200px;
height: 200px;
}
.boxContainer{
-webkit-perspective:100;
}
.box{
background: blue;
-webkit-transform-origin-x:0;
-webkit-transform: rotateY(10deg);
}
<div class="size boxContainer">
<div class="size box">
</div>
</div>
This worked for me.
2 more methods:
As seen on https://css-tricks.com/examples/ShapesOfCSS/#trapezoid you can use border:
#box {
border-left: 200px solid black;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
width: 0;
height: 100px;
}
but it can't have contents, because it's all border.
Example: http://jsfiddle.net/rudiedirkx/349x9/3112/
Use CSS' actual 'skew' transform:
#box {
width: 200px;
height: 170px;
margin-top: 30px;
background-color: black;
transform: skewY(10deg);
position: relative;
z-index: 1; /* doesn't work? */
}
#box:before {
content: "";
display: block;
width: 200px;
height: 80px;
position: absolute;
bottom: -40px;
left: 0;
background-color: black;
transform: skewY(-20deg);
z-index: -1; /* doesn't work? */
}
I can't seem to position the pseudo element behind the main element though, so the pseudo actually falls over the main element's content, if any.
Example: http://jsfiddle.net/rudiedirkx/349x9/3113/