CSS3之transform属性-2D转换

最新推荐文章于 2021-06-20 00:04:22 发布

Programmer.杨

最新推荐文章于 2021-06-20 00:04:22 发布

阅读量710

点赞数

分类专栏：前端技术-CSS 文章标签： css3 html5

本文链接：https://blog.csdn.net/YWB88888888/article/details/103604761

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

transform:

作用：
         该属性可以将元素旋转、缩放、移动、倾斜等
说明：
         应用于元素的2D或3D转换
常用值：
         (none)：定义不进行转换
         (translate)：定义2d位移，向右、向下为正值；向左、向上为负值
         (translateX)：定义关于x轴的位移
         (translateY)：定义关于y轴的位移
         (rotate)：定义2d旋转，顺时针为正值；逆时针为负值
         (rotateX)：定义关于x轴的旋转
         (rotateY)：定义关于y轴的旋转
         (scale)：定义2d缩放，0 - 1缩小，1 - +∞放大
         (scaleX)：定义关于x轴的缩放
         (scaleY)：定义关于y轴的缩放

transform-origin:

作用：
         改变元素转换的中心位置
说明：
         2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴，使用此属性必须先使用transform属性
常用值：
         (x-axis)：定义关于x轴的旋转中心，left、center、right、length、百分比
         (y-axis)：定义关于y轴的旋转中心，left、center、right、length、百分比
         (z-axis)：定义关于z轴的旋转中心，left、center、right、length、百分比
注意：
         注意后面的参数 x 和 y 用空格隔开
         x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
         还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

总结：

同时使用多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
但我们同时有位置或者其他属性的时候，要将位移放到最前面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之2D转换属性</title>
    
    <style type="text/css">
        body {
            height: 2000px;
        }
        div {
            width: 300px;
            height: 300px;
            transition: all 1s;
        }
        
        .div1 {
            background-color: #4fbfff;
        }
        .div1:hover {
            /* 定义在x轴方向上的位移 */
            /*transform: translateX(100px);*/
            
            /* 定义在y轴方向上的位移 */
            /*transform: translateY(100px);*/
            
            /* 同时使用 */
            /*transform: translateX(100px) translateY(100px);*/
            
            /* 合并用法 百分比值以自身size为基数 */
            transform: translate(50%, 50%);
        }
        
        .div2 {
            background-color: lightpink;
        }
        .div2:hover {
            /* 以元素中心点旋转 */
            transform: rotate(45deg);
        }
        
        .div3 {
            background-color: greenyellow;
        }
        .div3:hover {
            /* 指定x轴方向上的缩放 */
            /*transform: scaleX(1.5);*/
    
            /* 指定y轴方向上的缩放 */
            /*transform: scaleY(1.5);*/
            
            /* 同时使用 */
            /*transform: scaleX(1.5 ) scaleY(1.5);*/
            
            /* 指定x，y轴方向上的缩放 */
            /*transform: scale(2, 2);*/
    
            /* 合并用法 */
            transform: scale(1.5);
        }
        
        .div4 {
            margin: 0 auto;
            background-color: green;
        }
        .div4:hover {
            /*transform: translate(50%, 50%);*/
            /*transform: scale(2);*/
            transform-origin: right top;
            transform: rotate(-90deg);
        }
        
        .div5 {
            background-color: #1075ff;
        }
        .div5:hover {
            /* 综合写法：位移属性放在最前面 */
            transform: translate(400px, 400px) scale(.5) rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <hr>
    <div class="div2"></div>
    <hr>
    <div class="div3"></div>
    <hr>
    <div class="div4"></div>
    <hr>
    <div class="div5"></div>
</body>
</html>

案例1：分页按钮

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>CSS3之2D/3D转换案例：分页按钮</title>
    
    <style type="text/css">
        .page li {
            float: left;
            margin-right: 30px;
            list-style: none;
        }
        .page li a {
            display: block;
            width: 40px;
            height: 40px;
            border: 2px solid limegreen;
            border-radius: 20px;
            color: #999;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
            transition: all .2s;
        }
        .page li a:hover {
            color: #666;
            transform: scale(1.2);
        }
        .page li:first-child a,
        .page li:last-child a {
            width: 70px;
            border-radius: 35px/20px;
        }
    </style>
</head>
<body>
<div class="page">
    <ul>
        <li><a href="">上一页</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
        <li><a href="">6</a></li>
        <li><a href="">...</a></li>
        <li><a href="">下一页</a></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

案例2：下拉菜单

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>CSS3之2D/3D转换案例：下拉菜单</title>
    
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <style type="text/css">
        @font-face{
            font-family:'icomoon';
            src:url('fonts/icomoon.eot');
            src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
                url('fonts/icomoon.woff') format('woff'),
                url('fonts/icomoon.ttf')  format('truetype'),
                url('fonts/icomoon.svg#SofiaProLight')  format('svg');
            font-weight:normal;
            font-style:normal;
        
        }
        
        .side-menu li {
            list-style: none;
        }
        .side-menu li a {
            display: inline-block;
            position: relative;
            width: 180px;
            height: 38px;
            background-color: #444;
            color: white;
            line-height: 38px;
            text-align: center;
            text-decoration: none;
        }
        .side-menu li a i {
            position: absolute;
            top: 8px;
            right: 10px;
            font-style: normal;
            font-size: 20px;
            vertical-align: middle;
            transition: .4s;
        }
        .side-menu li a:hover {
            background-color: #1075ff;
            box-shadow: skyblue 0 0 20px 0 inset;
        }
        .side-menu li a:active {
            box-shadow: #0000ff 0 0 10px 0 inset;
        }
        .side-menu li a:hover .icon-circle-right {
            transform: rotate(90deg);
        }
        .side-menu ul li:first-child a {
            border-radius: 4px 4px 0 0;
        }
        .side-menu ul li:last-child a {
            border-radius: 0 0 4px 4px;
        }
    </style>
</head>
<body>
<div class="side-menu">
    <ul>
        <li><a href="#">链接1<i class="icon-circle-right"></i></a></li>
        <li><a href="#">链接2<i class="icon-circle-right"></i></a></li>
        <li><a href="#">链接3<i class="icon-circle-right"></i></a></li>
        <li><a href="#">链接4<i class="icon-circle-right"></i></a></li>
        <li><a href="#">链接5<i class="icon-circle-right"></i></a></li>
        <li><a href="#">链接6<i class="icon-circle-right"></i></a></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

案例3：旋转中心

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>CSS3之2D/3D转换案例：旋转中心</title>
    
    <style type="text/css">
        .container {
            overflow: hidden;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid skyblue;
            border-radius: 20px;
        }
        .container::before {
            content: "Hello World!";
            display: block;
            width: 400px;
            height: 400px;
            border-radius: 20px;
            background-color: skyblue;
            color: white;
            font-size: 30px;
            line-height: 400px;
            text-align: center;
            transition: .3s;
            transform: rotate(90deg) scale(0.2);
            transform-origin: left bottom;
        }
        .container:hover::before {
            transform: rotate(0deg) scale(1);
        }
    </style>
</head>
<body>
    <div>
        <div class="container"></div>
    </div>
</body>
</html>