形变
.box { transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg); } .box { transform: translateX(200px) | translateY(200px); } .box { transform: scaleX(2) scaleY(0.5) }
记:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>形变</title> <style type="text/css"> div { 150px; height: 150px; background-color: red; margin: 10px auto; transition: 3s; } /*旋转形变:旋转的是角度 deg*/ .d1:hover { /*transform: rotateX(3600deg);*/ /*transform: rotateY(3600deg);*/ /*transform: rotateZ(3600deg);*/ transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg); } /*偏移形变:偏移的是距离 px*/ .d2:hover { /*transform: translateX(200px);*/ /*transform: translateY(200px);*/ transform: translateX(200px) translateY(200px); } /*缩放形变:缩放的是比例*/ .d3:hover { transform: scale(2, 0.5); } .d4:hover { /*transform: translateX(200px) rotateZ(3600deg);*/ transform: rotateZ(3600deg) translateX(200px); } </style> </head> <body> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> </body> </html>