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;
}
Related
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;
}
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>
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.
I have the following code:
http://jsfiddle.net/cosoroaba/nCEwv/
HTML:
<div id="square">
<div class="corner-wrapper">
<div id="ctr"></div>
</div>
</div>
CSS:
#square {
border: 1px solid #CCCCCC;
display: block;
height: 400px;
line-height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 400px;
}
.corner-wrapper{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
clip: rect(0px, 141.421px, 70.7107px, 0px);
height: 141.421px;
position: absolute;
right: -20.7107px;
top: -20.7107px;
width: 141.421px;
}
#ctr{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 20.7107px;
top: 20.7107px;
background-color: blue;
display: block;
height: 100px;
position: absolute;
width: 100px;
}
#ctr:hover{
background-color: green;
}
#ctr:active{
background-color: red;
}
I'm rotating the wrapper in one direction and the content in the opposite direction, then cutting the wrapper in half using clip, to achieve a "triangle"-div
which works well on FF,Chrome and Opera
but there is this issue in IE9 http://www.screenr.com/ikos
hover is triggered on the content in IE9 even if it would be hidden by the wrapper
I'd refactor your code, there's a lot of unnecessary transformations going on, and if you change the size of your container your have to recalculate everything. I haven't checked in IE9 but this should work:
<div id="square">
<div id="ctr"></div>
</div>
CSS
#square {
border: 1px solid #CCCCCC;
display: block;
height: 400px;
line-height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 400px;
}
#ctr{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
right: 0;
top: 0;
background-color: blue;
display: block;
height: 150px;
position: absolute;
width: 100px;
}
#ctr:hover{
background-color: green;
}
#ctr:active{
background-color: red;
}
jsfiddle:
http://jsfiddle.net/exKJK/