- translateX
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 250px; height: 250px; background-color: green; transition: all 1s; } .box:hover { transform: translateX(300px); } </style> </head> <body> <div class="box"></div> </body> </html>
- translateX 效果
- translateY
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 250px; height: 250px; background-color: green; transition: all 1s; } .box:hover { transform: translateY(300px); } </style> </head> <body> <div class="box"></div> </body> </html>
- translateY 效果
- translateZ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { /* 透视: 加给变换的父盒子，不能加在当前动画的标签上，否则无效 */ /* 设置的是用户的眼睛距离屏幕的距离，越小距离屏幕越近，则效果更明显，越远则效果不会放大突兀 */ /* 透视效果只是视觉上的呈现，并不是真正的3D效果 */ perspective: 500px; } .box { width: 250px; height: 250px; background-color: green; transition: all 1s; margin: 200px auto; } .box:hover { /* translateZ 必须配合透视 perspective 来使用 */ transform: translateZ(200px); } </style> </head> <body> <div class="box"></div> </body> </html>
- translateZ 效果
