https://ru.stackoverflow.com/questions/1273957/%D0%9F%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B5-%D0%BF%D0%BE%D1%8F%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0
http://htmlbook.ru/css/transform
http://desandro.github.io/3dtransforms/docs/perspective.html
http://desandro.github.io/3dtransforms/examples/transforms-01-functions.html
https://developer.mozilla.org/ru/docs/Web/CSS/perspective
https://html5book.ru/css3-transform/
rotate
.div1 {
transform: rotate(45deg);
position:relative;
top:30px;
/* top right angle*/
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.div1:hover {
-moz-transform: rotate(15deg); /* Äëÿ Firefox */
-ms-transform: rotate(15deg); /* Äëÿ IE */
-webkit-transform: rotate(15deg); /* Äëÿ Safari, Chrome, iOS */
-o-transform: rotate(15deg); /* Äëÿ Opera */
transform: rotate(15deg);
}
https://hacks.mozilla.org/2018/03/bringing-interactive-examples-to-mdn/
skewX
.div3 {
transform: skewX(45deg);
background: #b3dced;
background: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
background: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -o-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
}
skewY
.div4{ transform: skewY(45deg); }
transform: perspective(600px);
.div5 { transform: perspective(600px);}
.scene {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 40px;
}
.panel {
width: 100%;
height: 100%;
background: red;
/* perspective function in transform property */
transform: perspective(600px) rotateY(45deg);
}
https://codepen.io/desandro/pen/XqMGRB
Carousel
https://codepen.io/desandro/pen/jxwELK
3D Carousel with JavaScript
https://codepen.io/desandro/pen/wjeBpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15