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;
}
Related
I tried rotating the content of my fixed div and it rotates as expected but the problem is it doesn't occupy the height of the div.
Sample fiddle here.
HTML:
<div class="outer-left">
<h2 class="paginator">Page 1 0f 10</h2>
</div>
CSS:
.outer-left {
background: #EFB041;
height: 100%;
display: block;
width: 4%;
position: fixed;
left: 18%;
}
.paginator {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
}
Note: I can make it by applying width = auto on the div but how can I
achieve it using a fixed width?
Now I can achieve it adding
margin-top: 600px;
white-space:nowrap;
inside the paginator class. but is there a way cleaner on how to get this done?
jsfiddle
Maybe this jsfiddle works for you.
HTML:
<div class="outer-left">
<h2 class="paginator">Page 1 of 10</h2>
</div>
>
CSS:
.outer-left {
position: relative;
background: #EFB041;
overflow: hidden;
width: 5%;
left: 18%;
height: 200px;
float: left;
}
.paginator {
position: absolute;
top: 30%;
left: -2.0em;
width: auto;
margin: 0;
padding:0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
color: #fff;
}
This question already has answers here:
Left/right transparent cut out arrow
(4 answers)
Closed 6 years ago.
I'm trying to put a transparent arrow on the right side of an image, vertically in the centre and showing the background image.
I've read this answer, and this codepen is basically exactly what I want, but I can't get my head around why it works and what I'd need to change to place it on the right hand side.
Codepen code:
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
There are two polygons with white background over the image, it is not an arrow but the space between the two polygons. Changin the width and the position of :before and :after you can move the triangle.
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 100%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 97%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>
In Firefox in some resolutions appears a pixel of the image in the bottom, can fix width bottom:-1px in .wrap::before, .wrap::after
Main css properties that you need to change are transform-origin and transform with some other changes as done below:
.wrap {
position: relative;
overflow: hidden;
width: 70%;
height:150px;
margin: 0 auto;
background-color:#fff;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
right: 0;
height: 50%;
background-color: inherit;
padding-right:3%;
}
.wrap:before {
bottom: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewY(45deg);
-webkit-transform: skewY(45deg);
transform: skewY(45deg);
}
.wrap:after {
top: 50%;
-ms-transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-ms-transform: skewY(-45deg);
-webkit-transform: skewY(-45deg);
transform: skewY(-45deg);
}
<div class="wrap">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>
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
This is my HTML code:
<style>
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
border:#000000 solid 2px;
width:500px;
height:500px;
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0%;
left: 0%;
z-index: -1;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
background: url(image.jpg) 0 0 no-repeat;
}
</style>
<div id="myelement"></div>
This is image.jpg file:
This is output of browser:
Here, background image is fixed and container is rotating. I want to make reverse. i,e Container will be fixed and background will rotate.
If I understood your question properly, you only need to apply transform: rotate on the pseudo-element which has the background and nothing on the container (like in the below snippet).
#myelement {
position: relative;
overflow: hidden;
border: #000000 solid 2px;
width: 100px;
height: 100px;
}
#myelement:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: -1;
transform: rotate(30deg);
background: url(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;
}
<div id="myelement"></div>
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.