CSS3 transform: translateX || translateY || translateZ

最新推荐文章于 2025-02-23 04:12:19 发布

卡尔特斯

最新推荐文章于 2025-02-23 04:12:19 发布

阅读量46

点赞数

文章标签： css3 css 前端 html javascript

本文链接：https://blog.csdn.net/zz00008888/article/details/132978238

版权

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>