先上效果
什么是Transform属性？
CSS3的transform属性允许你对元素应用各种图形转换效果，而不仅仅是改变它们的位置。这些转换包括旋转（rotate）、缩放（scale）、移动（translate）、倾斜（skew）等。
Transform的基本用法
旋转（Rotate）
使用rotate函数，你可以围绕一个元素的中心点旋转它，参数是一个角度，如deg（度）：
transform: rotate(45deg);
缩放（Scale）
scale函数允许你改变元素的大小。数值大于1表示放大，小于1表示缩小：
transform: scale(1.5);
移动（Translate）
translate函数可以移动元素从一个位置到另一个位置，参数是x轴和y轴上的距离：
transform: translate(50px, 100px);
倾斜（Skew）
skew函数可以让元素沿着X轴和Y轴倾斜，参数是倾斜的角度：
transform: skew(30deg, 20deg);
实际案例：产品列表添加动态效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Transform Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <ul class="product-list"> <li class="product"> <img src="product1.jpg" alt="Product 1"> <span class="description">Product 1 Description</span> </li> <li class="product"> <img src="product2.jpg" alt="Product 2"> <span class="description">Product 2 Description</span> </li> <li class="product"> <img src="product3.jpg" alt="Product 3"> <span class="description">Product 3 Description</span> </li> </ul> </body> </html>
CSS部分
.product-list { list-style: none; padding: 0; display: flex; justify-content: space-around; } .product { position: relative; overflow: hidden; } .product img { width: 200px; height: auto; transition: transform 0.5s ease; } .product .description { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); color: white; text-align: center; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } .product:hover img { transform: scale(1.1); } .product:hover .description { visibility: visible; opacity: 1; }
通过本文的学习，你已经能够利用CSS3的transform属性来增强产品列表的视觉吸引力和功能性。这种动态效果不仅可以提高用户的交互体验，还可以使产品信息的呈现更加生动和吸引人。
