Develop Reference

Making anti-clock to the progress bar

I am creating a progress bar using div, I got some code to create but that's clock-wise, instead, I need it in anti-clockwise
There are some HTML and CSS code, with which simple progress bar is created, my problem is that I can't use other technologies for it, so using only HTML,CSS I have to create it. Please help out to me in it.
.progress-circle {
font-size: 20px;
margin: 20px;
position: relative; /* so that children can be absolutely positioned */
padding: 0;
width: 5em;
height: 5em;
background-color: #F2E9E1;
border-radius: 50%;
line-height: 5em;
}
.progress-circle:after{
border: none;
position: absolute;
top: 0.35em;
left: 0.35em;
text-align: center;
display: block;
border-radius: 50%;
width: 4.3em;
height: 4.3em;
background-color: white;
content: " ";
}
/* Text inside the control */
.progress-circle span {
position: absolute;
line-height: 5em;
width: 5em;
text-align: center;
display: block;
color: #53777A;
z-index: 2;
}
.left-half-clipper {
/* a round circle */
border-radius: 50%;
width: 5em;
height: 5em;
position: absolute; /* needed for clipping */
clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
clip: rect(auto,auto,auto,auto);
}
.value-bar {
/*This is an overlayed square, that is made round with the border radius,
then it is cut to display only the left half, then rotated clockwise
to escape the outer clipping path.*/
position: absolute; /*needed for clipping*/
clip: rect(0, 2.5em, 5em, 0);
width: 5em;
height: 5em;
border-radius: 50%;
border: 0.45em solid #53777A; /*The border is 0.35 but making it larger removes visual artifacts */
/*background-color: #4D642D;*/ /* for debug */
box-sizing: border-box;
}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
/*Progress bar for the first 50%, filling the whole right half*/
position: absolute; /*needed for clipping*/
clip: rect(0, 5em, 5em, 2.5em);
background-color: #53777A;
border-radius: 50%;
width: 5em;
height: 5em;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }
/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
<div class="progress-circle p10">
<span>10%</span>
<div class="left-half-clipper">
<div class="first50-bar"></div>
<div class="value-bar"></div>
</div>
</div>
I want the progress bar should be anti-clockwise instead of clockwise

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Using this transform function we can do this:
Add transform: scale(-1, 1); to .progress-circle.
Add transform: scale(-1, 1); to .progress-circle span.
Here's demo.

Creating dynamic 3d css box based on height, width and depth

I have created the 3D Box with Fixed height and width, Now i have to make
it dynamic based height, width and depth given by user so that he can get
idea of how the box will look like. Height and width is working fine but when
i try to change the depth the box design breaks. also i want it to rotate
the box from the center position which is not done if i change the width.
jQuery('._3dface--top').css("width", (jQuery('#boxWidth').val() * 10));
jQuery('._3dface--top').css("height", jQuery('#boxzPosition').val());
jQuery('._3dface--bottom').css("width", (jQuery('#boxWidth').val() * 10));
jQuery('._3dface--bottom').css("height", jQuery('#boxzPosition').val());
jQuery('._3dface--bottom').css("top", parseInt((jQuery('#boxHeight').val() * 10) - 250));
jQuery('._3dface--left').css("width", jQuery('#boxzPosition').val());
jQuery('._3dface--left').css("height", (jQuery('#boxHeight').val() * 10));
jQuery('._3dface--right').css("width", jQuery('#boxzPosition').val());
jQuery('._3dface--right').css("height", (jQuery('#boxHeight').val() * 10));
jQuery('._3dface--right').css("left", parseInt((jQuery('#boxWidth').val() * 10) - 130));
jQuery('._3dface--back').css("width", (jQuery('#boxWidth').val() * 10));
jQuery('._3dface--back').css("height", (jQuery('#boxHeight').val() * 10));
JSfiddle

I have recreated your idea starting from 0.
I have set a demo cube where all the dimensions are set with css properties, and inheritance where posible.
there are 2 auxiliary elements that have borders to make them visible.
The six faces are background colored with distinctive colors to make them distinguishable.
And the center of rotation will be always where it should, too.
You can adapt it to run in older browsers using jQuery to change the variables, instead of using CSS (supported in all modern browsers. the only issue would be with IE)
const inputs = document.querySelectorAll('input');
// listen for changes
inputs.forEach(input => input.addEventListener('change', update));
function update(e) {
document.documentElement.style.setProperty(`--${this.id}`, this.value + 'px');
}
:root {
--height: 200px;
--width: 300px;
--depth: 120px;
}
.base,
.base * {
transform-style: preserve-3d;
}
.base {
height: var(--height);
width: var(--width);
margin: 100px;
position: relative;
border: solid 1px blue;
transform: rotate3d(1, 1, 1, 45deg);
}
.top {
height: var(--depth);
width: 100%;
bottom: 100%;
position: absolute;
background-color: rgba(255, 0, 0, 0.4);
transform: translateY(50%) rotateX(90deg);
}
.down {
height: var(--depth);
width: 100%;
top: 100%;
position: absolute;
background-color: rgba(0, 255, 0, 0.4);
transform: translateY(-50%) rotateX(90deg);
}
.right {
width: var(--depth);
height: 100%;
left: 100%;
position: absolute;
background-color: rgba(128, 128, 0, 0.4);
transform: translateX(-50%) rotateY(90deg);
}
.left {
width: var(--depth);
height: 100%;
right: 100%;
position: absolute;
background-color: rgba(128, 0, 128, 0.4);
transform: translateX(50%) rotateY(90deg);
}
.aux {
width: 100%;
height: var(--depth);
border: solid 2px red;
position: absolute;
transform: translateY(-50%) rotateX(-90deg);
}
.front {
height: var(--height);
width: 100%;
top: 100%;
position: absolute;
background-color: rgba(0, 0, 255, 0.4);
transform: rotateX(90deg);
transform-origin: center top;
}
.back {
height: var(--height);
width: 100%;
bottom: 100%;
position: absolute;
background-color: rgba(0, 128, 128, 0.4);
transform: rotateX(-90deg);
transform-origin: center bottom;
}
input {
width: 50px;
}
<div class="base">
<div class="top"></div>
<div class="down"></div>
<div class="right"></div>
<div class="left"></div>
<div class="aux">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<label for="height">height</label>
<input type="number" id="height" value="200" />
<label for="width">width</label>
<input type="number" id="width" value="300" />
<label for="depth">depth</label>
<input type="number" id="depth" value="120" />

CSS reveal from corner animation

I am trying to achieve an animation effect as follows:
When a banner is shown, the bottom right corner of the next banner should be visible. When you click on this corner, it should hide the current banner and reveal the next one.
My current markup is as follows:
<div class="banners">
<div class="image active" style="background-color: red;">
<div class="corner"></div>
</div>
<div class="image" style="background-color: blue;">
<div class="corner"></div>
</div>
</div>
CSS as follows: Notice I used clip-path to create the corner:
.banners {
width: 800px;
height: 600px;
}
.image {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.image.active {
z-index: 1;
clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0);
}
.corner {
width: 50%;
height: 50%;
position: absolute;
right: 0;
bottom: 0;
}
JS:
$(document).ready(function () {
$('.corner').click(function() {
$('.image.active').removeClass('active');
$(this).parent().addClass('active');
});
});
Here is a JSFiddle of all the above code: https://jsfiddle.net/cqqxjjgu/
One immediate issue with this is that because I'm using z-index to specify that the current 'active' banner should have precedence, when remove the active class it just displays the next banner immediately, so ideally the z-index should only be changed once the animation has completed.
Does anyone have anyt idea how I can achieive this? Ideally I need a cross browser solution (not too fussed about IE < 10).

A simple example accomplishing this effect with no javascript:
https://jsfiddle.net/freer4/j2159b1e/2/
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}
.banners {
position:relative;
background:#000;
width: 100%;
height: 100%;
overflow:hidden;
}
.banners input{
display:none;
}
.slide1{
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);
}
.slide2{
background-image:url(http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);
}
.slide3{
background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);
}
.image {
display:block;
height:100%;
width:100%;
position: absolute;
overflow:hidden;
z-index:1;
text-align:center;
background-position:0 0;
background-size:cover;
transition:z-index 1s step-end;
clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
animation-duration: 2s;
animation-name: clipout;
}
input:checked + .image{
z-index:3;
transition:z-index 1s step-end;
clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0);
animation-duration: 2.2s;
animation-name: clipin;
cursor:default;
}
.image:nth-child(2),
input:checked + * + * + .image{
z-index:2;
cursor:pointer;
}
.content{
color:#FFF;
display:inline-block;
vertical-align:middle;
font-family:arial;
text-transform:uppercase;
font-size:24px;
opacity:0;
transition:0s opacity 1s;
}
input:checked + .image .content{
opacity:1;
transition:0.8s opacity 0.8s;
}
.spanner{
vertical-align:middle;
width:0;
height:100%;
display:inline-block;
}
#keyframes clipout {
from { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }
50% { clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); }
51% { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
to { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
}
#keyframes clipin{
from { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
50% { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
to { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }
}
<div class="banners">
<input type="radio" id="slide1" name="slides" checked="checked" />
<label class="image slide1" for="slide1">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</label>
<input type="radio" id="slide2" name="slides" />
<label class="image slide2" for="slide2">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</label>
<input type="radio" id="slide3" name="slides" />
<label class="image slide3" for="slide3">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</label>
</div>
Basically, just use keyframes to animate the clip path. Get fancy with the z-indexes and some sibling selectors.

This should work for any browser with transition support:
https://jsfiddle.net/freer4/cqqxjjgu/1/
Essentially, make a really big cover slide, with the same background color as your next slide, and pull it over your current slide. Then fade out to reveal the next slide.
So a little adjustment on the html:
<div class="banners">
<div class="image active" style="background-color: black;">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
<div class="corner" style="background-color: cyan;"></div>
</div>
<div class="image" style="background-color: cyan;">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
<div class="corner" style="background-color: magenta;"></div>
</div>
<div class="image" style="background-color: magenta;">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
<div class="corner" style="background-color: black;"></div>
</div>
</div>
Change the jQuery to select either the next slide or the first if there are no more:
$(document).ready(function () {
$('.corner').click(function() {
var $parent = $(this).parent();
$parent.removeClass("active");
if ($parent.next().length){
$parent.next().addClass("active");
} else {
$parent.prevAll().last().addClass("active");
}
});
});
And set up some intricate transitions you can adjust the timing of:
.image {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow:hidden;
z-index:1;
transition:z-index 2s step-end, 1s opacity 1s ease-in-out;
text-align:center;
opacity:0;
}
.image.active{
opacity:1;
z-index:2;
transition:z-index 2s step-end, 0s opacity 0s;
}
.corner {
width: 200%;
height: 200%;
position: absolute;
top: -100%;
left: -100%;
clip-path: polygon(100% 0, 0 70%, 0 100%, 100% 100%, 100% 0, 100% 0);
z-index:3;
margin-left:150%;
margin-top:150%;
transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
}
.image.active .corner{
top:0;
left:0;
margin-top:0;
margin-left:0;
transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s;
}
Aside: This example is completely flexible (doesn't care about size):
.banners {
width: 100%;
height: 100%;
}
Or with images: https://jsfiddle.net/freer4/ens7caaL/

This is an answer without the use of clip-path, because browser compatibility on DOM elements other than svg is low.
I see now that Vadim had the same idea as me with the rotated container (hadn't checked back here until I had finished), but from what I can tell there are still enough differences between our answers to justify posting my solution:
$(document).ready(function() {
$(".slider").on("click",".next",function() {
if ($(this).prev().length) {$(this).prev().removeClass("curr");} else {$(this).siblings().last().removeClass("curr");} //deactivate current slide
if ($(this).next().length) {$(this).next().addClass("next");} else {$(this).siblings().first().addClass("next");} //prepare slide that follows next slide
$(this).removeClass("next").addClass("curr"); //activate next slide
});
});
.slider, .slider .img {
width: 55vw;
height: calc(55vw / 16*9);
background: #000 center/contain no-repeat;
}
.slider {position:relative; margin:0 auto; overflow:hidden;}
.slider .slide {
position: absolute;
z-index: 0;
width: 250%;
height: 0;
transform: translateX(-50%) rotate(-20deg);
transform-origin: 50% 0;
transition:z-index 0s 0.7s, height 0.7s;
overflow: hidden;
}
.slider .slide.next {z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s; cursor:pointer;}
.slider .slide.curr {z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;}
.slider .slide .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slide curr"><div class="img" style="background-image:url(https://placeimg.com/640/480/animals);"></div></div>
<div class="slide next"><div class="img" style="background-image:url(https://placeimg.com/640/480/people);"></div></div>
<div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/nature);"></div></div>
<div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/tech);"></div></div>
<div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/arch);"></div></div>
</div>
codepen: https://codepen.io/anon/pen/JJQRvM
jsfiddle: https://jsfiddle.net/tq2hw7b9/5/
Instead of clip-path I just change the height of the slide containers, using transition for the animation effects.
IE TROUBLES
Unfortunately, as usual, IE processes transform:rotate() differently from other browsers. Visually the rotations happen, but the browser still seems to reserve the original space of the elements, so therefor the exposed corner of the next slide is not clickable because the current slide is 'covering' it. Using the -ms- or -webkit- prefix doesn't make a difference.
The following code snippet DOES work in IE:
$(document).ready(function() {
$(".slider .corner").on("click",function() {
var $next = $(this).siblings(".next");
if ($next.prev().length) {$next.prev().removeClass("curr");} else {$next.siblings(".slide").last().removeClass("curr");} //deactivate current slide
if ($next.next(".slide").length) {$next.next().addClass("next");} else {$next.siblings().first().addClass("next");} //prepare slide that follows next slide
$next.removeClass("next").addClass("curr"); //activate next slide
});
});
.slider, .slider .img {
width: 55vw;
height: calc(55vw / 16*9);
background: #000 center/contain no-repeat;
}
.slider {position:relative; margin:0 auto; overflow:hidden;}
.slider .corner {
position: absolute;
z-index: 3;
bottom: 0;
right: 0;
width: 100%;
height: 21%;
transform: rotate(-20deg);
transform-origin: 100% 0;
cursor: pointer;
}
.slider .slide {
position: absolute;
z-index: 0;
width: 250%;
height: 0;
transform: translateX(-50%) rotate(-20deg);
transform-origin: 50% 0;
transition:z-index 0s 0.7s, height 0.7s;
overflow: hidden;
}
.slider .slide.next {z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s;}
.slider .slide.curr {z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;}
.slider .slide .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slide curr"><div class="img" style="background-image:url(https://placeimg.com/640/480/animals);"></div></div>
<div class="slide next"><div class="img" style="background-image:url(https://placeimg.com/640/480/people);"></div></div>
<div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/nature);"></div></div>
<div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/tech);"></div></div>
<div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/arch);"></div></div>
<div class="corner"></div>
</div>
codepen: https://codepen.io/anon/pen/GEbrzQ
jsfiddle: https://jsfiddle.net/8ggqndj1/
I added an extra <div class="corner"> that covers all the slides.
The click-handler in JS is now bound to this .corner, and at the start of the handler a reference to the next slide is stored into a variable, which is used in the rest of the code.
In CSS there is also a new rule for the .corner.
SLIDE-ARRAY IN JS
Have a look at the code snippet below, for a list of slides in JS (if someone needs it):
$(document).ready(function() {
var slides = [
2, //index for next slide
"https://placeimg.com/640/480/animals",
"https://placeimg.com/640/480/people",
"https://placeimg.com/640/480/nature",
"https://placeimg.com/640/480/tech",
"https://placeimg.com/640/480/arch"
];
//INITIALIZE SLIDESHOW--------------------
$(".slider").css("background-image","url("+slides[2]+")"); //set next slide
$(".slider .current .img").css("background-image","url("+slides[1]+")"); //set current slide, and set slide-height to slideshow-height
//SLIDESHOW CLICK-HANDLER--------------------
$(".slider .current").on("click",function(e){e.stopPropagation();});
$(".slider").on("click",function() {
$(this).children(".current").animate({height:0},700,function(){
$(this).children(".img").css("background-image","url("+slides[slides[0]]+")"); //set the current slide to the next slide
$(this).css("height","155%"); //cover entire slide
if (slides[0]==slides.length-1) {slides[0]=1;} else {++slides[0];} //increase/loop index for next slide
$(this).parent().css("background-image","url("+slides[slides[0]]+")"); //set the next slide to the next slide after that
$(this).animate({height:"135%"},400); //reveal corner for next slide
});
});
});
.slider, .slider .img {
width: 55vw;
height: calc(55vw / 16*9);
background: #000 center/contain no-repeat;
}
.slider {margin:0 auto; cursor:pointer; overflow:hidden;}
.slider .current {
width: 250%;
height: 135%;
transform: translateX(-50%) rotate(-20deg);
transform-origin: 50% 0;
overflow: hidden;
cursor: default;
}
.slider .current .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider"><div class="current"><div class="img"></div></div></div>
codepen: https://codepen.io/anon/pen/EXBgew
jsfiddle: https://jsfiddle.net/qghv9bnh/13/
It may hold some preferences for some, although I think my first solution is a lot cleaner, faster, and flexible for adding extra slides (certainly when you use a CMS like WordPress or Joomla):
The images are only loaded when you actually use the slider, so users save bandwidth for every slide they don't click on.
The HTML is very concise and will never grow no matter how many slides you have, so your HTML will look cleaner (but if you use PHP to include them it will look just as clean, even cleaner).
Can't really think of anything else, as I said, I prefer the first one. But none the less, it may come in handy for someone.

This will work everywhere, even in IE/Edge. It's based on CSS transitions and replacing CSS classes via JavaScript.
I'm using rotated rectangle to crop images. Demo of main principle (contains a lot of hardcoded, previously calculated values):
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 300px;
height: 200px;
border: 1px solid red;
position: relative;
}
div:after {
content: "";
position: absolute;
left: -86.6px;
top: 50px;
width: 359.8px;
height: 240px;
transform-origin: 0 0;
transform: rotate(-30deg);
border: 1px solid blue;
}
<div></div>
Main demo (there are a lot of hardcoded values). For better understanding how it works you can add border to .slide-cropper:
$(document).ready(function() {
$(".banners").on("click", ".slide-cropper.next .slide-content", function() {
var $container = $(this).closest(".slide");
$(".slide-cropper").removeClass("prev")
.removeClass("current")
.removeClass("next");
$(this).closest(".slide-cropper").addClass("current");
var $prevContainer;
if ($container.prev().length) {
$prevContainer = $container.prev();
} else {
$prevContainer = $container.siblings(":last");
}
$prevContainer.find(".slide-cropper").addClass("prev");
var $nextContainer;
if ($container.next().length) {
$nextContainer = $container.next();
} else {
$nextContainer = $container.siblings(":first");
}
$nextContainer.find(".slide-cropper").addClass("next");
});
});
*,
*:before,
*:after {
box-sizing: border-box;
}
/* all body styles are just for demo */
/* just centering the slider */
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.banners {
width: 300px;
height: 200px;
position: relative;
}
.slide {
width: 100%;
height: 100%;
}
.slide .slide-cropper {
position: absolute;
left: -86.6px;
top: 50px;
width: 359.8px;
height: 323.2px;
transform-origin: 0 0;
transform: rotate(-30deg);
overflow: hidden;
transition: height 2s linear;
}
.slide-content {
position: absolute;
background-size: 100% 100%;
left: 100px;
top: 0;
width: 300px;
height: 200px;
transform: rotate(30deg);
transform-origin: 0 0;
z-index: 0;
/* just styles for text */
/* using flexbox to center text */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 3em;
}
.slide1 .slide-content {
background-image: url("https://i.stack.imgur.com/tt875.jpg");
}
.slide2 .slide-content {
background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}
.slide3 .slide-content {
background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}
.slide-cropper.prev {
height: 0;
z-index: 3;
}
.slide-cropper.current {
height: 240px;
transition-delay: 2s;
z-index: 2;
}
.slide-cropper.next {
z-index: 1;
}
/* Fix for IE */
.slide-cropper.current {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide slide1">
<div class="slide-cropper current">
<div class="slide-content">
Slide 1
</div>
</div>
</div>
<div class="slide slide2">
<div class="slide-cropper next">
<div class="slide-content">
Slide 2
</div>
</div>
</div>
<div class="slide slide3">
<div class="slide-cropper">
<div class="slide-content">
Slide 3
</div>
</div>
</div>
</div>
To understand how it works I moved all calculations to CSS variables AKA CSS custom properties. They work in many browsers but not in combination with CSS calc function. This example works perfectly only in Chrome but will help to understand and modify this example (just replace CSS variables with calculated hardcoded values). Also you can move this calculations to CSS preprocessor or JavaScript code.
$(document).ready(function() {
$(".banners").on("click", ".slide-cropper.next .slide-content", function() {
var $container = $(this).closest(".slide");
$(".slide-cropper").removeClass("prev")
.removeClass("current")
.removeClass("next");
$(this).closest(".slide-cropper").addClass("current");
var $prevContainer;
if ($container.prev().length) {
$prevContainer = $container.prev();
} else {
$prevContainer = $container.siblings(":last");
}
$prevContainer.find(".slide-cropper").addClass("prev");
var $nextContainer;
if ($container.next().length) {
$nextContainer = $container.next();
} else {
$nextContainer = $container.siblings(":first");
}
$nextContainer.find(".slide-cropper").addClass("next");
});
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
--width: 300px;
--height: 200px;
/* rotate for image cropping */
--rotate-angle: 30deg;
/* sin 30 degrees for image cropping */
--sin-rotate-angle: 0.5;
/* cos 30 degrees for image cropping */
--cos-rotate-angle: 0.8660254037844386;
/* clipper ratio for width, can be from 0 to 1 */
--clipper-ratio: 0.45;
--animation-timeout: 2s;
}
/* all body styles are just for demo */
/* just centering the slider */
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.banners {
width: var(--width);
height: var(--height);
position: relative;
}
.slide {
width: 100%;
height: 100%;
}
.slide .slide-cropper {
position: absolute;
left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
transform-origin: 0 0;
transform: rotate(calc(-1 * var(--rotate-angle)));
overflow: hidden;
transition: height var(--animation-timeout) linear;
}
.slide-content {
position: absolute;
background-size: 100% 100%;
left: calc(var(--height) / 2);
width: var(--width);
height: var(--height);
transform: rotate(var(--rotate-angle));
transform-origin: 0 0;
z-index: 0;
/* just styles for text */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 3em;
}
.slide1 .slide-content {
background-image: url("https://i.stack.imgur.com/tt875.jpg");
}
.slide2 .slide-content {
background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}
.slide3 .slide-content {
background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}
.slide-cropper.prev {
height: 0;
z-index: 3;
}
.slide-cropper.current {
height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
transition-delay: var(--animation-timeout);
z-index: 2;
}
.slide-cropper.next {
z-index: 1;
}
/* Fix for IE */
.slide-cropper.current {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide slide1">
<div class="slide-cropper current">
<div class="slide-content">
Slide 1
</div>
</div>
</div>
<div class="slide slide2">
<div class="slide-cropper next">
<div class="slide-content">
Slide 2
</div>
</div>
</div>
<div class="slide slide3">
<div class="slide-cropper">
<div class="slide-content">
Slide 3
</div>
</div>
</div>
</div>
To change this to fullscreen you need to set --width: 100vw and --height: 100vh. (Of course, then you'll have to replace CSS variables with hardcoded values to work in all browsers). Demo:
$(document).ready(function() {
$(".banners").on("click", ".slide-cropper.next .slide-content", function() {
var $container = $(this).closest(".slide");
$(".slide-cropper").removeClass("prev")
.removeClass("current")
.removeClass("next");
$(this).closest(".slide-cropper").addClass("current");
var $prevContainer;
if ($container.prev().length) {
$prevContainer = $container.prev();
} else {
$prevContainer = $container.siblings(":last");
}
$prevContainer.find(".slide-cropper").addClass("prev");
var $nextContainer;
if ($container.next().length) {
$nextContainer = $container.next();
} else {
$nextContainer = $container.siblings(":first");
}
$nextContainer.find(".slide-cropper").addClass("next");
});
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
--width: 100vw;
--height: 100vh;
/* rotate for image cropping */
--rotate-angle: 30deg;
/* sin 30 degrees for image cropping */
--sin-rotate-angle: 0.5;
/* cos 30 degrees for image cropping */
--cos-rotate-angle: 0.8660254037844386;
/* clipper ratio for width, can be from 0 to 1 */
--clipper-ratio: 0.45;
--animation-timeout: 2s;
}
/* all body styles are just for demo */
/* just centering the slider */
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.banners {
width: var(--width);
height: var(--height);
position: relative;
}
.slide {
width: 100%;
height: 100%;
}
.slide .slide-cropper {
position: absolute;
left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
transform-origin: 0 0;
transform: rotate(calc(-1 * var(--rotate-angle)));
overflow: hidden;
transition: height var(--animation-timeout) linear;
}
.slide-content {
position: absolute;
background-size: 100% 100%;
left: calc(var(--height) / 2);
width: var(--width);
height: var(--height);
transform: rotate(var(--rotate-angle));
transform-origin: 0 0;
z-index: 0;
/* just styles for text */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 3em;
}
.slide1 .slide-content {
background-image: url("https://i.stack.imgur.com/tt875.jpg");
}
.slide2 .slide-content {
background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}
.slide3 .slide-content {
background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}
.slide-cropper.prev {
height: 0;
z-index: 3;
}
.slide-cropper.current {
height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
transition-delay: var(--animation-timeout);
z-index: 2;
}
.slide-cropper.next {
z-index: 1;
}
/* Fix for IE */
.slide-cropper.current {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide slide1">
<div class="slide-cropper current">
<div class="slide-content">
Slide 1
</div>
</div>
</div>
<div class="slide slide2">
<div class="slide-cropper next">
<div class="slide-content">
Slide 2
</div>
</div>
</div>
<div class="slide slide3">
<div class="slide-cropper">
<div class="slide-content">
Slide 3
</div>
</div>
</div>
</div>
Also demo with CSS variables that work in Firefox (Firefox is not friendly with combination of CSS variables and transform: rotate, so I just replaced transform: rotate with hardcoded values):
$(document).ready(function() {
$(".banners").on("click", ".slide-cropper.next .slide-content", function() {
var $container = $(this).closest(".slide");
$(".slide-cropper").removeClass("prev")
.removeClass("current")
.removeClass("next");
$(this).closest(".slide-cropper").addClass("current");
var $prevContainer;
if ($container.prev().length) {
$prevContainer = $container.prev();
} else {
$prevContainer = $container.siblings(":last");
}
$prevContainer.find(".slide-cropper").addClass("prev");
var $nextContainer;
if ($container.next().length) {
$nextContainer = $container.next();
} else {
$nextContainer = $container.siblings(":first");
}
$nextContainer.find(".slide-cropper").addClass("next");
});
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
--width: 100vw;
--height: 100vh;
/* sin 30 degrees for image cropping */
--sin-rotate-angle: 0.5;
/* cos 30 degrees for image cropping */
--cos-rotate-angle: 0.8660254037844386;
/* clipper ratio for width, can be from 0 to 1 */
--clipper-ratio: 0.45;
--animation-timeout: 2s;
}
/* all body styles are just for demo */
/* just centering the slider */
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.banners {
width: var(--width);
height: var(--height);
position: relative;
}
.slide {
width: 100%;
height: 100%;
}
.slide .slide-cropper {
position: absolute;
left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
transform-origin: 0 0;
transform: rotate(-30deg);
overflow: hidden;
transition: height var(--animation-timeout) linear;
}
.slide-content {
position: absolute;
background-size: 100% 100%;
left: calc(var(--height) / 2);
width: var(--width);
height: var(--height);
transform: rotate(30deg);
transform-origin: 0 0;
z-index: 0;
/* just styles for text */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 3em;
}
.slide1 .slide-content {
background-image: url("https://i.stack.imgur.com/tt875.jpg");
}
.slide2 .slide-content {
background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}
.slide3 .slide-content {
background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}
.slide-cropper.prev {
height: 0;
z-index: 3;
}
.slide-cropper.current {
height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
transition-delay: var(--animation-timeout);
z-index: 2;
}
.slide-cropper.next {
z-index: 1;
}
/* Fix for IE */
.slide-cropper.current {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banners">
<div class="slide slide1">
<div class="slide-cropper current">
<div class="slide-content">
Slide 1
</div>
</div>
</div>
<div class="slide slide2">
<div class="slide-cropper next">
<div class="slide-content">
Slide 2
</div>
</div>
</div>
<div class="slide slide3">
<div class="slide-cropper">
<div class="slide-content">
Slide 3
</div>
</div>
</div>
</div>

This sample working on Firefox, Chrome, IE.
For change sliding rule change transition
$(document).ready(function () {
$('.angle').click(function() {
var $parent = $(this).parent();
$parent.removeClass("current");
if ($parent.next().length){
$parent.next().addClass("current");
} else {
$parent.prevAll().last().addClass("current");
}
});
});
body{
height:100%;
width:100%;
}
.slideShow {
width: 100%;
height: 100%;
}
.image {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow:hidden;
z-index:1;
transition:z-index 2s step-end, 1s opacity 1s ease-in-out;
text-align:center;
opacity:0;
background-size:100% 100%;
background-attachment:fixed;
}
.image.current{
opacity:1;
z-index:2;
transition:z-index 2s step-end, 0s opacity 0s;
}
.angle {
width: 200%;
height: 200%;
position: absolute;
top: -100%;
left: -100%;
clip-path: polygon(100% 0, 0 70%, 0 100%, 100% 100%, 100% 0, 100% 0);
z-index:3;
margin-left:150%;
margin-top:150%;
transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
background-size:100% 100%;
background-attachment:fixed;
}
.image.current .angle{
top:0;
left:0;
margin-top:0;
margin-left:0;
transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s;
}
.main{
color:#FFF;
display:inline-block;
vertical-align:middle;
font-family:arial;
text-transform:uppercase;
font-size:24px;
}
.middle{
vertical-align:middle;
width:0;
height:100%;
display:inline-block;
}
.image1, .image3 .angle{
background-image: url(http://i3.imgbus.com/doimg/4c5o0m8m6o5n4e0.png);
}
.image1 .angle, .image2{
background-image:url(http://i4.imgbus.com/doimg/1c7obm6m1o3nbb0.png);
}
.image2 .angle, .image3{
background-image:url(http://i3.imgbus.com/doimg/ccbo5m2m8o8n759.jpg);
}
<div class="slideShow">
<div class="image image1 current">
<div class="main">
</div>
<div class="middle"></div>
<div class="angle" style="background-color: cyan;"></div>
</div>
<div class="image image2" style="background-color: cyan;">
<div class="main">
</div>
<div class="middle"></div>
<div class="angle" style="background-color: magenta;"></div>
</div>
<div class="image image3" style="background-color: magenta;">
<div class="main">
</div>
<div class="middle"></div>
<div class="angle"></div>
</div>
</div>
Also you can use SildeShow Maker softwares like Amazing Slider.
easy download, easy use: download link
it's very powerful software. see Screenshot

Css transform animation from right to left

I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE

Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.

Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});

Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});

scaling a centered div in a scrollable container

I'm trying to do a scale transformation on a div that is centered on a scrollable container div.
The trick i'm using to reflect the new div size after transformation, is using a wrapper and setting the new width/height to it so the parent can show the scrollbars correctly.
.container {
position: relative;
border: 3px solid red;
width: 600px; height: 400px;
background-color: blue;
overflow-x: scroll; overflow-y: scroll;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.wrapper {
order: 1;
background-color: yellow;
}
.content-outer {
width: 300px;
height: 200px;
transform-origin: 50% 50%;
/*transform-origin: 0 0;*/
}
.content-outer.animatted {
animation: scaleAnimation 1s ease-in forwards;
}
.content-outer.animatted2 {
animation: scaleAnimation2 1s ease-in forwards;
}
.content-inner {
width: 300px;
height: 200px;
background: linear-gradient(to right, red, white);
}
if the transformation origin was 0,0 the div is centered without animation jumps but the scrollbars are not correct. if the origin was in the middle both the div location and scrollbars are missed up
I have tried two ways to do the centering, using flexbox (http://jsfiddle.net/r3jqyjLz/1/) and using negative margins
(http://jsfiddle.net/roLf5tph/1/).
Is there a better way to do this ?

Is this what you are after?
I used CSS transitions for the scaling animation.
#centered {
background-image: linear-gradient(to bottom,yellow,red);
height: 200px;
transform: scale(1);
transition: transform 1s ease-out;
width: 200px;
}
#scrollable {
align-items: center;
border: 1px solid red;
display: flex;
height: 300px;
justify-content: center;
overflow: auto;
width: 300px;
}
Update #1
How about this one?
Using old school absolute centering (position absolute)
I see your point about flexbox. It seems that flexbox centering has some limitations when the centered element is larger than its container.

I am assuming that parts of the problem you are having can be summarized as:
You have a complex structure in your inner div which you want to scale as a group. (If it were a single element, this would've been easy with a matrix).
When the inner div is scaled beyond the bounds of the container, you don't get scrollbars without controlling the width/height.
You want the inner div to remain centered and at the same time, scrollbars should reflect the correct position.
With this, there are two (three actually) easy options.
Option 1:
Using the same markup in the question, you could keep the div centered when the scale factor is below 1. And for scale factors above 1, you change it to top-left. the overflow: auto on the container will take care of the scroll on its own because the div being scaled (via transform) is wrapped inside of another div. You don't really need Javascript for this.
This solves your problems 1 and 2.
Fiddle 1: http://jsfiddle.net/abhitalks/c0okhznc/
Snippet 1:
* { box-sizing: border-box; }
#container {
position: relative;
border: 1px solid red; background-color: blue;
width: 400px; height: 300px;
overflow: auto;
}
.wrapper {
position: absolute;
background-color: transparent; border: 2px solid black;
width: 300px; height: 200px;
top: 50%; left: 50%;
transform-origin: top left;
transform: translate(-50%, -50%);
transition: all 1s;
}
.box {
width: 300px; height: 200px;
background: linear-gradient(to right, red, white);
border: 2px solid yellow;
}
.inner { width:50px; height: 50px; background-color: green; }
#s0:checked ~ div#container .wrapper { transform: scale(0.5) translate(-50%, -50%); }
#s1:checked ~ div#container .wrapper { transform: scale(0.75) translate(-50%, -50%); }
#s2:checked ~ div#container .wrapper { transform: scale(1) translate(-50%, -50%); }
#s3:checked ~ div#container .wrapper { top: 0%; left: 0%; transform-origin: top left; transform: scale(1.5) translate(0%, 0%); }
#s4:checked ~ div#container .wrapper { top: 0%; left: 0%; transform-origin: top left; transform: scale(2) ; }
#s5:checked ~ div#container .wrapper { top: 0%; left: 0%; transform-origin: top left; transform: scale(3) ; }
<input id="s0" name="scale" data-scale="0.5" type="radio" />Scale 0.5
<input id="s1" name="scale" data-scale="0.75" type="radio" />Scale 0.75
<input id="s2" name="scale" data-scale="1" type="radio" checked />Scale 1
<input id="s3" name="scale" data-scale="1.5" type="radio" />Scale 1.5
<input id="s4" name="scale" data-scale="2" type="radio" />Scale 2
<input id="s5" name="scale" data-scale="3" type="radio" />Scale 3
<hr>
<div id="container">
<div id="wrapper" class="wrapper">
<div id="box" class="box">
<div class="inner"></div>
</div>
</div>
</div>
But this creates another problem. The overflow:auto will cause a jump/flicker when the div is scaled beyond the container. This can be easily solved by making it overflow:scroll to show the scrollbars at all times (the way you are doing it already). Although, it works like a charm in Firefox, Chrome falters here and doesn't update the scrollbar position. The trick here is to use Javascript to force a reflow by changing the overflow to auto once your scaling completes. So you need to delay it a bit.
Fiddle 2: http://jsfiddle.net/abhitalks/u7sfef0b/
Snippet 2:
$("input").on("click", function() {
var scroll = 'scroll',
scale = +($(this).data("scale"));
if (scale > 1) { scroll = 'auto'; }
setTimeout(fixScroll, 300, scroll);
});
function fixScroll(scroll) { $("#container").css({ overflow: scroll }); }
* { box-sizing: border-box; }
#container {
position: relative;
border: 1px solid red; background-color: blue;
width: 400px; height: 300px;
overflow: scroll;
}
.wrapper {
position: absolute;
background-color: transparent; border: 2px solid black;
width: 300px; height: 200px;
top: 50%; left: 50%;
transform-origin: top left;
transform: translate(-50%, -50%);
transition: all 1s;
}
.box {
width: 300px; height: 200px;
background: linear-gradient(to right, red, white);
border: 2px solid yellow;
}
.inner { width:50px; height: 50px; background-color: green; }
#s0:checked ~ div#container .wrapper { transform: scale(0.5) translate(-50%, -50%); }
#s1:checked ~ div#container .wrapper { transform: scale(0.75) translate(-50%, -50%); }
#s2:checked ~ div#container .wrapper { transform: scale(1) translate(-50%, -50%); }
#s3:checked ~ div#container .wrapper { top: 0%; left: 0%;transform-origin: top left; transform: scale(1.5) translate(0%, 0%); }
#s4:checked ~ div#container .wrapper { top: 0%; left: 0%;transform-origin: top left; transform: scale(2) ; }
#s5:checked ~ div#container .wrapper { top: 0%; left: 0%;transform-origin: top left; transform: scale(3) ; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="s0" name="scale" data-scale="0.5" type="radio" />Scale 0.5
<input id="s1" name="scale" data-scale="0.75" type="radio" />Scale 0.75
<input id="s2" name="scale" data-scale="1" type="radio" checked />Scale 1
<input id="s3" name="scale" data-scale="1.5" type="radio" />Scale 1.5
<input id="s4" name="scale" data-scale="2" type="radio" />Scale 2
<input id="s5" name="scale" data-scale="3" type="radio" />Scale 3
<hr>
<div id="container">
<div id="wrapper" class="wrapper">
<div id="box" class="box">
<div class="inner"></div>
</div>
</div>
</div>
Option 2:
In order to solve problem 3 of keeping the div centered and at the same time maintaining the correct scrollbar position, you have to fallback on Javascript.
The principle remains the same that for scale factors above 1 you need to reset the top-left and translate positions. You would also need to recalc the scaled width/height and then re-assign that to your wrapper div. Then setting the scrollTop and scrollLeft on the container will be as easy as just getting the difference of the wrapper div and the container div.
This solves your problems 1, 2, and 3.
Fiddle 3: http://jsfiddle.net/abhitalks/rheo6o7p/1/
Snippet 3:
var $container = $("#container"),
$wrap = $("#wrapper"),
$elem = $("#box"),
originalWidth = 300, originalHeight = 200;
$("input").on("click", function() {
var factor = +(this.value);
scaler(factor);
});
function scaler(factor) {
var newWidth = originalWidth * factor,
newHeight = originalHeight * factor;
$wrap.width(newWidth); $wrap.height(newHeight);
if (factor > 1) {
$wrap.css({ left: 0, top: 0, transform: 'translate(0,0)' });
$elem.css({ transform: 'scale(' + factor + ')' });
setTimeout(setScroll, 400);
} else {
$elem.css({ transform: 'scale(' + factor + ') ' });
$wrap.css({ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' });
}
}
function setScroll() {
var horizontal, vertical;
horizontal = ($wrap.width() - $container.width()) / 2;
vertical = ($wrap.height() - $container.height()) / 2;
$container.stop().animate({scrollTop: vertical, scrollLeft: horizontal}, 500);
}
* { box-sizing: border-box; }
#container {
position: relative;
border: 1px solid red; background-color: blue;
width: 400px; height: 300px;
overflow: scroll;
}
.wrapper {
position: absolute;
background-color: transparent; border: 2px solid black;
width: 300px; height: 200px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s;
}
.box {
width: 300px; height: 200px;
background: linear-gradient(to right, red, white);
border: 2px solid yellow;
transform-origin: top left;
transition: all 0.5s;
}
.inner { width:50px; height: 50px; background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="slider1">Scale: </label>
<input id="slider1" type="range" min="0.5" max="3" value="1" step="0.25" list="datalist" onchange="scaleValue.value=value" />
<output for="slider1" id="scaleValue">1</output>
<datalist id="datalist">
<option>0.5</option>
<option>0.75</option>
<option>1</option>
<option>1.5</option>
<option>2</option>
<option>3</option>
</datalist>
<hr>
<div id="container">
<div id="wrapper" class="wrapper">
<div id="box" class="box">
<div class="inner"></div>
</div>
</div>
</div>
All scripts tested with IE-11, GC-43, and FF-38
.

The hard part of this problem is that, in the middle of the zoom in process, you need to change from a model (where you have still margins) to another model where you need to expand the size of the container.
Since this happens in the middle of the transform, it's difficult to handle with a single property transform
The way that I have found to solve this is to change the min-height and min-width properties. This will give the posibility to auto detect this point and handle it gracefully
I am keeping in JS only the basic functionality, everything else is done in CSS
function setZoom3() {
var ele = document.getElementById("base");
ele.className = "zoom3";
}
function setZoom1() {
var ele = document.getElementById("base");
ele.className = "";
}
function setZoom05() {
var ele = document.getElementById("base");
ele.className = "zoom05";
}
.container {
width: 300px;
height: 300px;
overflow: scroll;
position: relative;
}
#base {
width: 300px;
height: 300px;
top: 0px;
left: 0px;
position: absolute;
min-width: 300px;
min-height: 300px;
transition: min-width 5s, min-height 5s;
}
.inner {
width: 200px;
height: 200px;
background-color: lightgreen;
background-image: linear-gradient(-45deg, red 5%, yellow 5%, green 95%, blue 95%);
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
transform-origin: top left;
transition: transform 5s;
}
#base.zoom3 {
min-width: 600px;
min-height: 600px;
}
.zoom3 .inner {
transform: scale(3) translate(-50%, -50%);
}
.zoom05 .inner {
transform: scale(0.5) translate(-50%, -50%);
}
.trick {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
transform: translate(0px);
}
<div class="container">
<div id="base">
<div class="inner"></div>
</div>
</div>
<button onclick="setZoom3();">zoom 3</button>
<button onclick="setZoom1();">zoom 1</button>
<button onclick="setZoom05();">zoom 0.5</button>
The only issue left would be to set the scroll position, just in case you want it to keep in the center

I've managed to solve it with a touch of logic. I've used GSAP for the animation and updates, but you could easily get it working with vanilla JS:
http://codepen.io/theprojectsomething/pen/JdZWLV
... Because of the need to scroll the parent div to keep the element centred (and no way to animate the scroll) you're not going to be able to get a smooth transition with CSS alone.
Note: Even without the scroll, a pure CSS transition seems to have trouble syncing (the offset, whether top/left, margin, or translate, is always catching up with the scale) ... this may be due to sub-pixel positioning? Someone else may be able to provide further insight here.
Full code from Codepen:
var $inner = document.querySelector('aside'),
$outer = document.querySelector('main'),
$anim = document.querySelector('[type="checkbox"]'),
$range = document.querySelector('[type="range"]'),
data = {
width: $outer.clientWidth,
value: 1
};
$range.addEventListener('input', slide, false);
function slide () {
$anim.checked ? animate(this.value) : transform(this.value);
}
function animate (value) {
TweenLite.to(data, 0.4, {
value: value,
onUpdate: transform
});
}
function transform (value) {
if( !isNaN(value) ) data.value = value;
var val = Math.sqrt(data.value),
offset = Math.max(1 - val, 0)*0.5,
scroll = (val - 1)*data.width*0.5;
TweenLite.set($inner, {
scale: val,
x: offset*100 + "%",
y: offset*100 + "%"
});
TweenLite.set($outer, {
scrollLeft: scroll,
scrollTop: scroll
});
}
window.onresize = function (){
data.width = $outer.clientWidth;
transform(data.value);
};
main, aside:before, footer {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
main {
width: 50vh;
height: 50vh;
min-width: 190px;
min-height: 190px;
background: black;
overflow: scroll;
box-sizing: border-box;
}
aside {
position: relative;
width: 100%;
height: 100%;
border: 1vh solid rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, yellow, red);
background-image: linear-gradient(to bottom, yellow, red);
box-sizing: border-box;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
aside:before {
content: "";
background: black;
border-radius: 50%;
width: 10%;
height: 10%;
display: block;
opacity: 0.5;
}
input {
display: block;
margin: 3em auto;
}
input:after {
content: attr(name);
color: white;
text-transform: uppercase;
position: relative;
left: 2em;
display: block;
line-height: 0.9em;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<main>
<aside></aside>
</main>
<footer>
<input type="checkbox" name="animate" checked>
<input type="range" min="0.1" step="0.005" max="3">
</footer>

Matthew King's fiddle was close to being correct.The only thing that needs fixing is the div's offset. If your inner div is exceeding the boundaries of the scrollable div (negative offset) you need to set the offset to 0. Else you want the div to be centered. Centering is however not that trivial. You are zooming the div's background with css, hence you are not affecting the actual width and height of your div and need to parse the scale matrix to calculate it's backgrounds dimension.
This solution works for me: https://jsfiddle.net/6e2g6vzt/11/ (at least for FF on Ubuntu, did not test on other browsers yet)It is basically just one function to set the new offset, you don't even have to call it manually due to this line of code
$("#centered").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", setNewOffset);
which calls the setNewOffset function after the transformation is completed.
As you can see the image 'jumps' to it's correct position after the transformation, maybe you want to add a smooth effect to cover that but i just wanted to show you how to get the correct offset.
Have a look at jQuery's documentation to learn more about .offset()
Credits:
Thanks to Jim Jeffers for the nice callback after transistions https://stackoverflow.com/a/9255507/3586288
Thanks to Lea Verou for the great regex to parse the scale matrix https://stackoverflow.com/a/5604199/3586288