CSS3 2D Transformation
Keyword: transform
- Move: Move along the x, y axis, will not affect the position of the box, and have no effect on inline elements
div {
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: translate(100px,100px);
transform: translateX(100px);
transform: translateY(100px);
}
- rotate rotate
div {
width: 200px;
height: 200px;
background-color: aqua;
/* transform: rotate(30deg); */
transition: all 1s;
}
div:hover {
transform: rotate(360deg);
}
- 2d transformation center point transform-origin
div {
width: 200px;
height: 200px;
border: 1px solid #000;
transition: all 1s;
transform-origin: left bottom;
transform-origin: 300px 300px;
}
div:hover {
transform: rotate(220deg)
}
- Zoom scale: You can set the transformation center point without affecting other boxes
p {
width: 200px;
height: 200px;
background-color: red;
}
p:hover {
transform: scale(2,1);
transform: scaleX(3);
transform: scale(2);
transform: scale(0.5);
}
- Convert comprehensive writing: separated by spaces, the order will affect the effect, it is best to shift first
li:hover {
transform: translate(0px,10px) rotate(90deg) scale(1.2);
}
CSS3 animation
Keyword: animation
- Define animations with keyframes and use
@keyframes move {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: red;
animation: move 2s ;
}
Animation related properties:
- Use multiple states and properties
@keyframes move {
from {
transform: translateX(0px);
}
50% {
transform: translate(500px, 200px);
}
60% {
transform: translateX(1000px);
}
to {
transform: translateX(0);
}
}
div {
width: 200px;
height: 200px;
background-color: red;
animation: move 2s ;
animation-iteration-count: infinite;
animation-direction: alternate;
/* animation-fill-mode: forwards; */
}
div:hover {
animation-play-state: paused;
}
CSS3 3D Transformation
-
Perspective perspective: write to the parent box of the observed element;
-
Mobile: translate3d:
body {
perspective: 105px;
}
div {
width: 100px;
height: 100px;
background-color: #663399;
transform: translate3d(100px,100px,10px);
}
- Rotaterotate3d:
body {
perspective: 300px;
}
img {
display: block;
margin: 20px 200px;
width: 200px;
transition: all 2s;
}
img:hover {
transform: rotateX(360deg);
transform: rotateY(180deg);
transform: rotateZ(90deg) ;
transform: rotate3d(1,1,0,270deg);
}
- 3d rendering transform-style:
body {
perspective: 300px;
}
box {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transition: all 2s;
}
.box:hover {
transform: rotateY(180deg);
}
.box div {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background-color: aqua;
}
.box div:last-child {
background-color: blue;
transform: rotateX(60deg);
}