I'm tring to transform a div like this picture:
https://i.stack.imgur.com/OGRSq.png
Original image is this:
https://i.stack.imgur.com/kKj8w.png
I need something like this:
transform: rotate3d(x,x,x,xdeg) skew(x)
or any algorithm calculates that degrees.
Edit: Demo: codepen.io/yy/pen/zGZdXg (Fitting the ".grid" div to the ipad's screen)
Thank you
One of my friends, Cihad Turhan, solved and created this beauty:
codepen.io/cihadturhan/pen/RPpxOK/
function adj(m) { // Compute the adjugate of m
return [
m[4]*m[8]-m[5]*m[7], m[2]*m[7]-m[1]*m[8], m[1]*m[5]-m[2]*m[4],
m[5]*m[6]-m[3]*m[8], m[0]*m[8]-m[2]*m[6], m[2]*m[3]-m[0]*m[5],
m[3]*m[7]-m[4]*m[6], m[1]*m[6]-m[0]*m[7], m[0]*m[4]-m[1]*m[3]
];
}
function multmm(a, b) { // multiply two matrices
var c = Array(9);
for (var i = 0; i != 3; ++i) {
for (var j = 0; j != 3; ++j) {
var cij = 0;
for (var k = 0; k != 3; ++k) {
cij += a[3*i + k]*b[3*k + j];
}
c[3*i + j] = cij;
}
}
return c;
}
function multmv(m, v) { // multiply matrix and vector
return [
m[0]*v[0] + m[1]*v[1] + m[2]*v[2],
m[3]*v[0] + m[4]*v[1] + m[5]*v[2],
m[6]*v[0] + m[7]*v[1] + m[8]*v[2]
];
}
function pdbg(m, v) {
var r = multmv(m, v);
return r + " (" + r[0]/r[2] + ", " + r[1]/r[2] + ")";
}
function basisToPoints(x1, y1, x2, y2, x3, y3, x4, y4) {
var m = [
x1, x2, x3,
y1, y2, y3,
1, 1, 1
];
var v = multmv(adj(m), [x4, y4, 1]);
return multmm(m, [
v[0], 0, 0,
0, v[1], 0,
0, 0, v[2]
]);
}
function general2DProjection(
x1s, y1s, x1d, y1d,
x2s, y2s, x2d, y2d,
x3s, y3s, x3d, y3d,
x4s, y4s, x4d, y4d
) {
var s = basisToPoints(x1s, y1s, x2s, y2s, x3s, y3s, x4s, y4s);
var d = basisToPoints(x1d, y1d, x2d, y2d, x3d, y3d, x4d, y4d);
return multmm(d, adj(s));
}
function project(m, x, y) {
var v = multmv(m, [x, y, 1]);
return [v[0]/v[2], v[1]/v[2]];
}
function transform2d(elt, x1, y1, x2, y2, x3, y3, x4, y4) {
var w = elt.offsetWidth, h = elt.offsetHeight;
var t = general2DProjection
(0, 0, x1, y1, w, 0, x2, y2, 0, h, x3, y3, w, h, x4, y4);
for(i = 0; i != 9; ++i) t[i] = t[i]/t[8];
t = [t[0], t[3], 0, t[6],
t[1], t[4], 0, t[7],
0 , 0 , 1, 0 ,
t[2], t[5], 0, t[8]];
t = "matrix3d(" + t.join(", ") + ")";
elt.style["-webkit-transform"] = t;
elt.style["-moz-transform"] = t;
elt.style["-o-transform"] = t;
elt.style.transform = t;
}
corners = [0, 0, 600, 0, 0, 800, 600, 800];
function update() {
var box = document.getElementById("box");
transform2d(box, corners[0], corners[1], corners[2], corners[3],
corners[4], corners[5], corners[6], corners[7]);
for (var i = 0; i != 8; i += 2) {
var elt = document.getElementById("marker" + i);
elt.style.left = corners[i] + "px";
elt.style.top = corners[i + 1] + "px";
}
}
function move(evnt) {
if (currentcorner < 0) return;
corners[currentcorner] = evnt.pageX;
corners[currentcorner + 1] = evnt.pageY;
update();
}
currentcorner = -1;
window.addEventListener('load', function() {
document.documentElement.style.margin="0px";
document.documentElement.style.padding="0px";
document.body.style.margin="0px";
document.body.style.padding="0px";
update();
});
window.addEventListener('mousedown', function(evnt) {
var x = evnt.pageX, y = evnt.pageY, dx, dy;
var best = 400; // 20px grab radius
currentcorner = -1;
for (var i = 0; i != 8; i += 2) {
dx = x - corners[i];
dy = y - corners[i + 1];
if (best > dx*dx + dy*dy) {
best = dx*dx + dy*dy;
currentcorner = i;
}
}
move(evnt);
});
window.addEventListener('mouseup', function(evnt) {
currentcorner = -1;
})
window.addEventListener('mousemove', move);*{
-webkit-user-drag: none;
-webkit-user-select: none;
}
#container {
position:relative;
width: 100%;
height: 100%;
overflow: clip;
}
#box {
position: absolute;
top: 0px;
left: 0px;
width: 1600px;
height: 2133.3333px;
border: 1px solid red;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
}
.corner {
position: absolute;
top: 0px; left: 0px;
border: 1px solid blue;
}
body {
background: #65a8e7;
}
.ipad-animation {
position: absolute;
display: block;
top: 0%; left: 0%;
/*-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);*/
}
.ipad-animation .base {
position: relative;
display: block;
}
.ipad-animation .base img {
position: relative;
display: block;
width: 700px;
}
.ipad-animation .grid {
position: absolute;
display: inline-block;
top: 0; left: 0;
width: 600px;
height: 800px;
padding: 0;
white-space: nowrap;
background: #f7ae28;
overflow: hidden;
}
.ipad-animation .column {
display: inline-block;
vertical-align: top;
width: 400px;
}
.ipad-animation .item {
position: relative;
display: block;
margin: 0 10px 22px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 0 rgba(0,0,0,.16);
border-radius: 4px;
white-space: normal;
/*visibility: hidden;
pointer-events: none;
opacity: 0;*/
}
.ipad-animation .item.active {
visibility: visible;
pointer-events: all;
opacity: 1;
}
.ipad-animation .item-image {
position: relative;
display: block;
width: 100%; height: auto;
border-radius: 4px 4px 0 0;
}
.ipad-animation .item-author {
position: relative;
display: block;
padding: 17px 20px;
}
.ipad-animation .author-image {
position: relative;
display: block;
float: left;
width: 56px; height: 56px;
margin-right: 10px;
border-radius: 50%;
vertical-align: middle;
}
.ipad-animation .author-image img {
position: relative;
display: block;
width: 100%;
border-radius: 50%;
}
.ipad-animation .author-name {
position: relative;
display: block;
width: calc(100% - 66px);
padding-top: 10px;
font-size: 21px;
font-weight: bold;
color: #1a1a1a;
}
.ipad-animation .item-info {
position: relative;
display: block;
width: calc(100% - 66px);
padding-bottom: 5px;
font-size: 10px;
font-weight: 400;
color: #999;
}
.ipad-animation .item-source {
position: relative;
display: inline-block;
vertical-align: middle;
overflow: hidden;
width: 18px; height: 18px;
margin-right: 3px;
border-radius: 50%;
font-size: 10px;
color: #fff;
line-height: 18px;
text-align: center;
background: #ccc;
}
.ipad-animation .item-source.fs-facebook {background: #3b5998}
.ipad-animation .item-source.fs-twitter {background: #55acee}
.ipad-animation .item-source.fs-swarm {background: #ff9d0f}
.ipad-animation .item-source.fs-pinterest {background: #cc2127}
.ipad-animation .item-source.fs-instagram {background: #3f729b}
.ipad-animation .item-source.fs-vine {background: #00b488}
.ipad-animation .item-source.fs-youtube {background: #cd201f}
.ipad-animation .item-source:before {
display: block;
line-height: 18px;
}
.ipad-animation .item-date {
position: relative;
display: inline-block;
vertical-align: top;
line-height: 20px;
}
.ipad-animation .item-content {
position: relative;
display: block;
padding: 0 20px 20px;
font-size: 16px;
font-weight: 400;
line-height: 22px;
color: #3b3b3b;
}
.ipad-animation .item-content a {
font-weight: 600;
color: #65a8e7;
-ms-word-break: break-all;
word-break: break-all;
}<div class="ipad-animation" id="container">
<div class="base">
<img src="http://flat.social/site-assets/images/ipad_gold.png" alt="">
</div>
<div class="grid" id="box">
<div id="marker0" class="corner">TL</div>
<div id="marker2" class="corner">TR</div>
<div id="marker4" class="corner">BL</div>
<div id="marker6" class="corner">BR</div>
<div class="column size-1of4">
<div class="item">
<img src="http://lorempixel.com/400/270/nature/1" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/1" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-instagram"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/2" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/2" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-twitter"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/3" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/1" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/1" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-instagram"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/2" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/2" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-twitter"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
</div>
<div class="column size-1of4">
<div class="item">
<img src="http://lorempixel.com/400/270/nature/3" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/2" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-twitter"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/4" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/2" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-twitter"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/3" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/3" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/2" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-twitter"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
</div>
<div class="column size-1of4">
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/5" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/3" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/6" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/2" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-twitter"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/5" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/3" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
</div>
<div class="column size-1of4">
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/7" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/2" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-twitter"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<img src="http://lorempixel.com/400/270/nature/8" alt="" class="item-image">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
<div class="item">
<div class="item-author">
<span class="author-image"><img src="http://lorempixel.com/100/100/people/4" alt=""></span>
<span class="author-name">Jenny Yelriwer</span>
<span class="item-info">
<i class="item-source fs-facebook"></i>
<span class="item-date">30 min</span>
</span>
</div>
<div class="item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere nibh vel efficitur luctus. Cras consectetur commodo felis, eu blandit augue tincidunt id.</div>
</div>
</div>
</div>
<div class="ghosts"></div>
</div>
<!-- <div id="container">
<div id="box">
<p>This is a test.</p>
<p>Move the corners of this div using your mouse.</p>
</div>
<div id="marker0" class="corner">TL</div>
<div id="marker2" class="corner">TR</div>
<div id="marker4" class="corner">BL</div>
<div id="marker6" class="corner">BR</div>
</div> -->Thank you