CSS3变形效果transform

最新推荐文章于 2023-02-02 14:25:22 发布

xuehyunyu

最新推荐文章于 2023-02-02 14:25:22 发布

阅读量377

点赞数

文章标签： CSS3 transform 变形 html

本文链接：https://blog.csdn.net/xuehyunyu/article/details/71908368

版权

transform各属性的定义：

translate/translateX/translateY：在水平、垂直或者两个方向上平移元素。

scale/scaleX/scaleY：在水平、垂直或者两个方向上缩放元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            border: 1px solid red;
            width: 160px;
            height: 185px;
            overflow: hidden;/*把图片放大的部分隐藏*/
        }
       /* img{
            transform: translate(350px,100px); !*从左上角开始按X、Y轴移动
            transform: scale(1.5);     !*把图片放大为原来的1.5倍
            transform: scaleX(1.5);    !*X方向上改变
            transform: scaleY(1.5);    !*Y方向上改变
            transform: skew(20deg);    !*倾斜20度
            transform: rotate(90deg);  !*旋转90度
        }*/
       img{
           transition: all 1.2s ease;/*对所有的属性添加过度效果*/
       }
       /*transition、transform是分离的*/
        img:hover{
            /*transform: rotateY(180deg);*/
            transform: scale(1.5);/*图片放大*/
        }
    </style>
    <title>transform</title>
</head>
<body>
<div>
    <img src="../../img/Android1.png" alt="">
</div>
</body>
</html>

xuehyunyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3变形效果transform

transform各属性的定义：translate/translateX/translateY：在水平、垂直或者两个方向上平移元素。scale/scaleX/scaleY：在水平、垂直或者两个方向上缩放元素。 div{ border: 1px solid red; width: 160px;
复制链接

扫一扫