i have a circle and i am showing some text in the middle as demonstrated in the fiddle(JSFIDDLE http://jsfiddle.net/874jgh4v/2/) My requirement is this
I need to animate the outer white border for percentage for example if the percentage is 50% then i need to show that border only around half the circle
I need to show that percentage value on hower for example the text 50% should be shown only on hower preferably with some animation.
.wrapper{padding:30px;}
.circle{
border-radius: 50%;
background:#32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width:220px;
height:220px;
box-sizing:border-box;
}
.circle:hover {
background:red;
}
<div class="wrapper">
<div class="circle">
<p>Total ROE's</p>
<p>300</p>
<p>70%</p>
</div>
</div>
Any help would be appreciated! Also i would prefer to do this without external libraries , the percentages should support decimal points upto two points.
Try this:
Html
<span class='Progress'>
<div class="Bar">
<div class="Outer">
<div class="Fill"></div>
</div>
<div class="Draw"></div>
<div class="Status"><span></span></div>
</div>
</span>
CSS
.Progress {
position: absolute;
left: 25%;
bottom: 30%;
}
.Progress .Bar {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.Progress .Bar .Outer {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 70px, 70px, 35px);
}
.Bar .Outer .Fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 35px, 70px, 0);
background: #00A0E3;
transform: rotate(60deg);
}
.Progress .Bar .Draw {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 53.84615px/2);
top: calc(50% - 53.84615px/2);
width: 53.84615px;
height: 53.84615px;
background: #fff;
text-align: center;
display: table;
}
.Progress .Bar .Status {
display: table-cell;
vertical-align: middle;
position: absolute;
margin-left: -100px;
margin-top: -10px;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
text-align: center;
}
.Progress .Bar .Status > span {
font-size: 14px;
font-weight: bold;
color: #00A0E3;
}
.Progress .Bar.halfway {
background-color: #00A0E3;
}
.Progress .Bar.halfway .Outer {
clip: rect(0, 35px, 70px, 0);
}
.Progress .Bar.halfway .Outer .Fill {
clip: rect(0, 70px, 70px, 35px);
background: #E5E5E5;
}
.Progress .Bar.complete.halfway,
.Progress .Bar.complete .Fill
{
background-color: #8cd64c !important;
}
Javascript/JQuery:
$('document').ready(function() {
var progress = function(perc) {
perc = Math.round(perc * 100) / 100; // 2 decimal places
var $bar = $('.Progress .Bar'),
$fill = $('.Progress .Bar .Outer .Fill'),
$status = $('.Progress .Bar .Status span');
$bar.removeClass("halfway").removeClass("complete");
// outer bar
if (perc >= 50) $bar.addClass("halfway");
if (perc >= 100) $bar.addClass("complete");
// progress bar
var degrees = 360 * perc / 100;
$fill.css({
"WebkitTransform": 'rotate(' + degrees + 'deg)',
"-moz-transform": 'rotate(' + degrees + 'deg)'
});
// status
$status.html(perc);
}
// Test it!
progress(10);
setTimeout(function() {
progress(50);
setTimeout(function() {
progress(100);
}, 2000);
}, 2000);
});
Show me the CodePen
Related
While transform rotate in javascript whenever I add anything to 360 drgree, it again starts counting from 0 degree and my rotated div reverts backwards to 0 deg if I use transition. I want my rotation to continue in same direction. Please help
i tried my issue separately... and it is working...
<style>
.container-div {
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid #000;
position: relative;
}
.center-div {
position: absolute;
margin: auto;
top:0;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid #f00;
transform: rotate(0deg);
transition: all 0.3s linear;
}
.rotate-click {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
background-color: #000;
color: #fff;
text-align: center;
cursor: pointer;
}
</style>
<div class="container-div">
<div class="center-div"></div>
</div>
<div class="rotate-click">rotate</div>
<script>
let angle = 0;
document.querySelector(".rotate-click").addEventListener("click", ()=>{
angle += 45;
document.querySelector(".center-div").style.transform = `rotate(${angle}deg)`;
console.log(angle);
});
</script>
thanks to #ControlAltDel and #Barmar
I want my element center aligned until scrolling in div reached has reached end, here is my code
clamp = (value, min, max) => {
if (value < min) return min;
else if (value > max) return max;
return value;
};
const playground = document.getElementById('playground');
const viewarea = document.getElementById('viewarea');
const selfUser = document.getElementById('user1');
window.playgroundBounding = { minX: 0, maxX: playground.clientWidth, minY: 0, maxY: playground.clientHeight };
playground.onmouseup = function (e) {
if (e.button === 0) mouseClicked(e);
};
function mouseClicked(event) {
xposition = event.clientX + viewarea.scrollLeft - selfUser.offsetWidth / 2;
yposition = event.clientY + viewarea.scrollTop - selfUser.offsetHeight / 2;
xposition = clamp(xposition, window.playgroundBounding.minX, window.playgroundBounding.maxX - selfUser.offsetWidth);
yposition = clamp(yposition, window.playgroundBounding.minY, window.playgroundBounding.maxY - selfUser.offsetHeight);
$(selfUser).animate(
{
left: xposition + 'px',
top: yposition + 'px',
},
500,
'linear'
);
viewarea.scrollTo(xposition, yposition)
}
body {
margin:0;
padding:0;
}
#viewarea {
width: 100vw;
height: 100vh;
overflow: auto;
position: relative;
scroll-behavior: smooth;
transform-origin: left top;
top:0px;
left:0px;
/*overflow: hidden;*/
}
#playground {
width: 1920px;
height: 1080px;
background-image: url('https://www.tynker.com/projects/screenshot/60390c5cde3bf81ccf3101f6/erosion.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 1920px 1080px;
position: relative;
scroll-behavior: smooth;
transform: translate(0px, 0px) scale(1, 1);
left: 0px;
top:0px;
}
.avatar {
width: 50vw;
height: 50vw;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
color: blue;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: move;
user-select: none;
transition: transform 0.1s ease-in;
position:absolute;
}
.avatar-image {
width: 30vw;
height: 30vw;
background: url("https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200") top left / cover no-repeat;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 3px solid white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="viewarea">
<div id="playground">
<div class="avatar " id="user1">
<div class="avatar-image">
<div class="user-name"></div>
</div>
</div>
</div>
</div>
Now on click avatar is moving on view area, i want scrollbars to scroll vertically and horizontally nicely according to player position, or maybe player remain in center until scrollbar scrolled completely and player can touch the border.
We have to build a clock in JavaScript using divs only, (document.createElement()). Somehow, I never get the positioning of the divs right. Currently, I'm already struggling to make the first DIV.
Sorry if I have mistakes in the calculation of the angles.
Are there any better ways to achieve this goal?
Now it looks a bit like this:
The red lines are representing the numbers of a clock (12 of them in total).
window.onload = function drawclock() {
var clock = this.document.getElementById("clock");
var width = clock.offsetHeight;
var radius = width / 2;
for (var i = 1; i < 12; i++) {
var element = document.createElement("DIV");
addClass(element, "h");
addClass(element, i);
var deg = 30 * i;
var x = Math.cos(deg * (180 / Math.PI)) * radius + radius;
var y = Math.sin((90 - deg) * (180 / Math.PI)) * radius + radius;
console.log(x + " " + y);
element.style.position = "absolute";
element.style.left = x + "px";
element.style.top = y + "px";
element.style.transform = "rotate(" + deg + "deg)";
clock.appendChild(element);
}
}
function addClass(element, name) {
var arr;
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #000;
}
#clock {
height: 500px;
width: 500px;
background-color: #DDDDDD;
border-radius: 100%;
position: absolute;
}
.h {
width: 10px;
height: 70px;
background-color: red
}
.m {
width: 5px;
height: 80px;
background-color: blue
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="clock">
</div>
</body>
</html>
Here is a clock example made by Eric Brewer on CodePen.
I have compiled SCSS and Pug keeping only the necessary parts of the code to make the clock work. This version doesn't require any JavaScript to run.
However, I have added some JavaScript code to make it start from a particular position. This can be achieved using the class Date to get the current date and setting the animation-delay CSS property with the property animationDelay for each clock arms.
Here is the working code:
let setTime = function(date) {
const delay = [
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
date.getMinutes() * 60 + date.getSeconds(),
date.getSeconds()
];
[...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);
}
setTime(new Date())
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Main style for the clock */
.face {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 400px;
height: 400px;
background: #eee;
border-radius: 50%;
padding: 20px;
border: 20px solid #d9d9d9;
}
.face:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 3;
}
/* Numbers: styling and positioning */
.numbers {
position: relative;
}
.number {
position: absolute;
height: 200px;
transform-origin: 0 100%;
font-size: 28px;
}
.number:nth-child(1) {
transform: rotate(25deg);
}
.number:nth-child(1) span {
display: block;
transform: rotate(-25deg);
}
.number:nth-child(2) {
transform: rotate(55deg);
}
.number:nth-child(2) span {
display: block;
transform: rotate(-55deg);
}
.number:nth-child(3) {
transform: rotate(85deg);
}
.number:nth-child(3) span {
display: block;
transform: rotate(-85deg);
}
.number:nth-child(4) {
transform: rotate(115deg);
}
.number:nth-child(4) span {
display: block;
transform: rotate(-115deg);
}
.number:nth-child(5) {
transform: rotate(145deg);
}
.number:nth-child(5) span {
display: block;
transform: rotate(-145deg);
}
.number:nth-child(6) {
transform: rotate(178deg);
}
.number:nth-child(6) span {
display: block;
transform: rotate(-175deg);
}
.number:nth-child(7) {
transform: rotate(205deg);
}
.number:nth-child(7) span {
display: block;
transform: rotate(-205deg);
}
.number:nth-child(8) {
transform: rotate(235deg);
}
.number:nth-child(8) span {
display: block;
transform: rotate(-235deg);
}
.number:nth-child(9) {
transform: rotate(265deg);
}
.number:nth-child(9) span {
display: block;
transform: rotate(-265deg);
}
.number:nth-child(10) {
transform: rotate(295deg);
}
.number:nth-child(10) span {
display: block;
transform: rotate(-295deg);
}
.number:nth-child(11) {
transform: rotate(325deg);
}
.number:nth-child(11) span {
display: block;
transform: rotate(-325deg);
}
.number:nth-child(12) {
transform: rotate(355deg);
}
.number:nth-child(12) span {
display: block;
transform: rotate(-355deg);
}
/* Clock hands styling */
.hands {
position: absolute;
top: 50%;
left: 50%;
}
.hand {
position: absolute;
top: 50%;
left: 50%;
height: 120px;
width: 10px;
content: "";
background: black;
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
transform-origin: 50% 100%;
z-index: 4;
animation: count 3600s linear infinite;
}
.hand:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 10px solid transparent;
border-width: 10px 5px 41px;
border-bottom-color: black;
content: "";
}
.hand.hand-hour {
height: 70px;
transform: translate(-50%, -100%) rotate(30deg);
animation: count 43200s linear infinite;
}
.hand.hand-second {
height: 130px;
width: 8px;
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
animation: count 60s linear infinite;
}
.hand.hand-second .body {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: red;
z-index: 4;
}
.hand.hand-second:before {
border-width: 10px 4px 41px;
border-bottom-color: red;
z-index: -1;
}
/* animation of the clock hands */
#keyframes count {
0%,
100% {
transform: translate(-50%, -100%);
}
25% {
transform: translate(-50%, -100%) rotate(90deg);
}
50% {
transform: translate(-50%, -100%) rotate(180deg);
}
75% {
transform: translate(-50%, -100%) rotate(270deg);
}
}
<div class="watch">
<div class="face">
<div class="numbers">
<div class="number number-1"><span>1</span></div>
<div class="number number-2"><span>2</span></div>
<div class="number number-3"><span>3</span></div>
<div class="number number-4"><span>4</span></div>
<div class="number number-5"><span>5</span></div>
<div class="number number-6"><span>6</span></div>
<div class="number number-7"><span>7</span></div>
<div class="number number-8"><span>8</span></div>
<div class="number number-9"><span>9</span></div>
<div class="number number-10"><span>10</span></div>
<div class="number number-11"><span>11</span></div>
<div class="number number-12"><span>12</span></div>
</div>
<div class="hands">
<div class="hand hand-hour"></div>
<div class="hand hand-minute"></div>
<div class="hand hand-second">
<div class="body"></div>
</div>
</div>
</div>
</div>
Simply set the current date in date, the JavaScript code will loop through the clock's arms and delay each animation. CSS animation will allow the clock to run continuously after page has been loaded.
This method is a lot more efficient than using a JavaScript function to compute the positions and move clock hands. CSS animations are way more powerful here.
EDIT :
When you're programming a piece of code you should always start with a piece of paper and define what you want, how you will achieve it before starting typing. You have to have a plan before typing, otherwise, it will simply not work.
So as you told me you only want to position the number ticks (the original question wasn't that clear...). It's easier to have all ticks as black rectangles positioned in the center, set their height and width. So we have:
Then use the transform property to rotate each tick to the right angle: 0°, 30°, 60°, 90°, ..., 300°, 330° and 360°. Use rotate(x deg).
Lastly here's the trick to the set the ticks' size correctly:
use a gradient to hide the part of the tick closer to the center so we only show the tip of each tick:
background: linear-gradient(
to top,
#eee 0%,
#eee 80%,
black 80%,
black 100%
);
In the end you should have:
Combining this with the previous code to make the clock turn you get:
let drawTicks = function() {
for (let i = 1; i < 13; i++) {
let el = document.createElement('div');
el.setAttribute('class', `number number${i}`);
el.style.transform = `rotate(${i*30}deg)`;
document.querySelector('.numbers').appendChild(el);
}
}; drawTicks()
let setTime = function(date) {
const delay = [
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
date.getMinutes() * 60 + date.getSeconds(),
date.getSeconds()
];
[...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);
}; setTime(new Date())
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Main style for the clock */
.face {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 400px;
height: 400px;
background: #eee;
border-radius: 50%;
padding: 20px;
border: 20px solid #d9d9d9;
}
.face:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 3;
}
/* Numbers: styling and positioning */
.numbers {
position: relative;
}
.number {
width: 5px;
background: linear-gradient( to top, #eee 0%, #eee 80%, black 80%, black 100%);
position: absolute;
height: 200px;
transform-origin: 0 100%;
font-size: 28px;
}
/* Clock hands styling */
.hands {
position: absolute;
top: 50%;
left: 50%;
}
.hand {
position: absolute;
top: 50%;
left: 50%;
height: 120px;
width: 10px;
content: "";
background: black;
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
transform-origin: 50% 100%;
z-index: 4;
animation: count 3600s linear infinite;
}
.hand:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 10px solid transparent;
border-width: 10px 5px 41px;
border-bottom-color: black;
content: "";
}
.hand.hand-hour {
height: 70px;
transform: translate(-50%, -100%) rotate(30deg);
animation: count 43200s linear infinite;
}
.hand.hand-second {
height: 130px;
width: 8px;
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
animation: count 60s linear infinite;
}
.hand.hand-second:before {
border-width: 10px 4px 41px;
border-bottom-color: red;
z-index: -1;
}
/* animation of the clock hands */
#keyframes count {
0%,
100% {
transform: translate(-50%, -100%);
}
25% {
transform: translate(-50%, -100%) rotate(90deg);
}
50% {
transform: translate(-50%, -100%) rotate(180deg);
}
75% {
transform: translate(-50%, -100%) rotate(270deg);
}
}
<div class="watch">
<div class="face">
<div class="numbers"></div>
<div class="hands">
<div class="hand hand-hour"></div>
<div class="hand hand-minute"></div>
<div class="hand hand-second">
</div>
</div>
</div>
</div>
I need get hover effect in a div from the cursor position.
I have this html and css
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
transition: width 1s, height 1s, margin 1s;
}
.s:hover {
width: 100px;
height: 100px;
background-color: black;
margin: 50px 0px 0px 50px;
}
<div class="f">
<div class="s"></div>
</div>
And I need something like this:
I'm open to js or jquery solutions.
EDIT
I have a jquery solution:
$("div.f").mousemove(function(e) {
$('div.s').css({
left: e.clientX - 28,
top: e.clientY - 24
});
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
/* comment or remove the overflow if necessary */
overflow: hidden;
}
.s {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
But i need the circle make the over animation like first snippet.
Original question here
To change position of inner circle you can use pageX and pageY on mousemove. To change size of inner circle you can create one class that will scale div and toggle that class on hover over .f.
var s = $('.s')
var f = $('.f')
var oTop = f.offset().top + (s.height() / 2);
var oLeft = f.offset().left + (s.width() / 2);
f.hover(function() {
s.toggleClass('change')
})
f.mousemove(function(e) {
var x = e.pageY - oTop
var y = e.pageX - oLeft
s.css({
top: x + 'px',
left: y + 'px'
})
})
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
overflow: hidden;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
position: absolute;
pointer-events: none;
opacity: 0;
transition: transform 0.5s linear, opacity 0.3s linear;
}
.change {
transform: scale(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
Here is a jQuery solution.
$("div.f").mousemove(function(e) {
$('div.s').css({
left: e.clientX - 28,
top: e.clientY - 24
});
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
/* comment or remove the overflow if necessary */
overflow: hidden;
}
.s {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
$('.f').on('mousemove', function(e){
var par = $(this);
if((e.pageX <= par.width() && e.pageX >= 0) && e.pageY <= par.height() && e.pageY >= 0){
$('.s').css({
position: 'relative',
left: e.pageX - (par.width() / 2),
top: e.pageY - (par.height() / 2)
});
} else {
$('.s').css({
position: 'initial'
});
}
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
transition: width 1s, height 1s, margin 1s;
}
.s:hover {
width: 100px;
height: 100px;
background-color: black;
margin: 50px 0px 0px 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
function moveInner(e)
{
var inner = document.getElementById('inner');
inner.style.top = (e.clientY-100)+"px";
inner.style.left= (e.clientX-100)+"px";
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 100px;
height: 100px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
position: absolute;
}
Please put the inner div outside the parent div
And set the onmouseover for parent div to change inner div's position
<div class="f" id="parent" onmousemove="moveInner(event)">
</div><div class="s" id="inner"></div>
var ol_x= null;
var ol_y= null;
function moveInner(me, e)
{
if(ol_x!=null)
{
var ctx = me.getContext("2d");
ctx.arc(ol_x, ol_y, 42, 0, 2 * Math.PI, false);
ctx.fillStyle='grey';
ctx.fill();
ctx.restore();
}
ol_x = e.clientX+20;
ol_y = e.clientY+20;
var ctx = me.getContext("2d");
ctx.beginPath();
ctx.arc(ol_x, ol_y, 40, 0, 2*Math.PI, false);
ctx.fillStyle ='black';
ctx.fill();
ctx.stroke();
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
Hi this is my solution for EDIT<BR>
I use 2D context to draw inner DIV inside parent DIV
<canvas class="f" id="parent" onmousemove="moveInner(this, event)">
</canvas>
I have a modal containing one or more images and these images can rotate.
My issue is when image rotate it overflow the parent div. I wish to have the container to change dimension to always fit the image (images).
I created a codepen to have a look.
I tried to change many and many css properties without success...
Jade:
.overlay
.fake-modal
.content
img.img(src='http://lorempixel.com/output/abstract-q-c-300-200-2.jpg')
.wrapper
button.left rotate left
button.right rotate right
Less:
.overlay {
background-color: rgba(0, 0, 0, .7);
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.fake-modal {
background-color: #fff;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: auto;
height: auto;
z-index: 1;
.content {
position: relative;
.wrapper {
position: absolute;
top: 10px;
right: 10px;
}
}
}
js:
var angle = 0;
var btnLeft = $('.left');
var btnRight = $('.right');
btnLeft.on('click', function (e) {
e.preventDefault();
angle = angle - 90;
rotate(angle);
});
btnRight.on('click', function (e) {
e.preventDefault();
angle = angle + 90;
rotate(angle);
});
function rotate(rotateDegrees) {
var r = 'rotate(' + rotateDegrees + 'deg)';
var img = $('.img');
img.css({
'-moz-transform': r,
'-webkit-transform': r,
'-o-transform': r,
'-ms-transform': r
});
}
Solved using getBoundingClientRect()
Codepen: http://codepen.io/anon/pen/BNENge
you may set fixed width and height to div contaning image.
http://codepen.io/anon/pen/XbQXJP
`.overlay {
background-color: rgba(0, 0, 0, .7);
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.fake-modal {
background-color: #fff;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: auto;
height: auto;
z-index: 1;
.content {
position: relative;
.imgContainer {
position: relative;
width: 300px;
height: 200px;
.img {
position: absolute;
margin-left: -150px;
margin-top: -100px;
top: 50%;
left: 50%;
}
}
.wrapper {
position: absolute;
top: 10px;
right: 10px;
}
}
}`