I am in front of a mystery: I have a box, the css defines the width of each side.
I use links to rotate the box, adding a class to show each side.
The link just clears the classes of the box, and adds one of the following class:
.show-front {
transform: rotateY(0deg);
}
.show-back {
transform: rotateY(-180deg);
}
.show-left {
transform: rotateY(-270deg);
}
.show-right {
transform: rotateY(-90deg);
}
However, depending on the side in front, the alignment of the div is not the same.
I isolated my problem and created a codepen at the following location: http://codepen.io/3MO/pen/XpwYBB
I check the dimensions and coordinates of each side brought to front, I cannot see the problem. What do I miss?
Thanks a lot in advance!
The divs don't fit inside the parrent.
You forgot the additional border-width on your boxSide divs.
Your #mainBox should have width: 1102px;.
Related
I would like to create the same effect like on this website: https://www.razorfish.com
i've already set the item on top with the following css:
#first-block{
position:fixed;
top:100px;
width:760px;
margin-left:-380px;
left: 50%;
z-index: -99;
}
How can I achieve the effect like on the website. Do I need to use js or can I just handle it with css.
I thought to listen to a first scroll on the page with js and then add an css class with transition effect.
Does anyone now how to proceed or is it a correct way to listen to the first scroll and add class with transition effect?
You can achieve the same using CSS transform property to the background image.
transform: translate3d(0, 0, 0) scale(1);
I am after some general pointers on how to go about the following.
I am trying to position some elements (divs) in a web page by absolute position, relative to the element in which they live.
The idea being that the containing element top/left should be exactly where it would be in the normal document flow, the width should be set such that it fills <body> up to the RHS, less a small margin, and height such that it fills the remainder of the display window, less the space taken up by a footer (also a div).
Having done that, I can then absolutely position sub-elements inside it. The problem is setting the width/height of the containing element.
I have tried various combination of position properties and javascript executed onload(), without success. I clearly am not taking the right approach.
What I am really after are some pointers from someone who knows how to do this as to the approach to be taken. The bottom line is that I need that containing element to expand to be as big as it can, given the constraints of the browser window and the space taken by the footer element.
.... More info following comments.
Basically, I am trying to display a schedule, not unlike a TV/radio schedule. I.e. a line per event class, then within each line lots of individual events displayed in boxes, with the 'box width/position' scaled to the start/end of the actual event on a timeline.
I've seen this done simply using HTML tables and lots of columns to get
the necessary granularity, then using colspan to vary the widths. However I thought I'd try to do it with absolute positioning of elements. The first problem being that the containing element then has no idea how big this thing is, because using position:absolute takes each element out of the document flow. Therefore, no scroll bars either, even with overflow-x:auto on the containing element.
I am getting nowhere fast with css/javascript (well, certainly nowhere, but not even very fast, actually), and I am starting to wonder of the only real way to control the UI closely is by writing a java applet to contain it all?
Hence my question: conceptually, what would be a good way of going about this?
for the container to contain an absolute element, the height must be set to a fixed height or dynamically set the height using Javascript.
See Example https://codepen.io/jacobgoh101/pen/kkWJaL
HTML
<div class="container">
<img src="https://s21.postimg.org/c1m6ky7dz/kingston_creative_market_cover_small_f.jpg">
</div>
CSS
.container {
position: relative;
width: 90%;
border: 1px solid #000;
}
.container > img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Javascript with jQuery
window.onload = function() {
var imgHeight = $('.container img').height();
var targetHeight = imgHeight * 1.2;
$('.container').height(targetHeight);
};
I got completely stuck on this. I have a container with background image. Inside the container are 3 little circles. What I am trying to do is to zoom the background image when I hover over it and dim the background image when I hover over any of the 3 little circles.
I got to the point where the 3 circles are properly overlapping the container and the background zooms in on hover. But I have 2 issues
no. 1 I am not very fond of the way I am achieving the overlay of the circles, which is this code
#circle_wrap{
position: absolute;
margin-top: -130px;
}
no. 2 Is that I have no clue how to dim the background. My original intention was to have a hidden black conteniner with 0.5 opacity that would be displayed when I hover over one of the circles. But I couldn't figure out how to select the overlay.
JSFIDDLE here
If anything couldn't be solved with css only, I'd accept jquery solution as well.
I'm looking for any advice/tips/solutions you guys have, I really need to get this working.
Thank you.
Finally got so angry I am not able to do it with css that I made it with jquery :(
If anyone is interested here is the result
I have at least fixed the issue no1 with better css but the second is done with jquery.
solved no.1 with
.circle_wrap{
position: absolute; bottom: 0; width: 100%; height: 100px;
}
and applying position:relative on its parent
and the solution for no.2 is
$(".circle_wrap").hover(function () {
$(this).siblings("img").css("opacity", "0.2");
},
function () {
$(this).siblings("img").css("opacity", "1");
});
EDIT: safari support
.wrap img:hover{
-moz-transition: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
-webkit-animation-name: scaleThis;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
#-webkit-keyframes scaleThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(0deg); }
}
I got an image inside bootstrap panel, i want to add functionality when i can click on a rotate button and the image would rotate.
i got the following:
.rotate{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg); // IE9 only
transform: rotate(90deg);
}
if i add class to my img it rotates that 90degs but it comes out of the panel, it stops to follow the width and height restrictions, just rotates in place.
Is there a way to do that? I mean to rotate the image, in a way that it will still be in panel's borders.
EDIT:
i got this: http://jsfiddle.net/jjbjn160/
its overflowing the left side of panel, i want it to fit in to the panel.
set the style of the panel to overflow: hidden.
.panel {
overflow: hidden;
}
I want to create a zoom in effect on my large div. I have searched many questions and still don't know how this work.
I want to be able to zoom into the center of the user screen instead of the set position.
http://jsfiddle.net/kB27M/1/
I have tried css3 zoom feature and animate zoom property but still can't pull this one. Can anyone help me about it? Thanks a lot!
You should scale the div:
.scaled {
-moz-transform: scale(3);
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
div {
transition: all 500ms ease-in;
}
Simply apply the CSS class to the div and then use the transitionEndevent to apply further styles via .animate().
On transitionEnd (discard live(), use on()): jsfiddle