欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3之transform属性-2D转换

程序员文章站 2024-01-24 16:02:52
...

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 设置像素或者方位名词(topbottomleftrightcenter)
 

总结:

  • 同时使用多个转换,其格式为 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>

CSS3之transform属性-2D转换
 

案例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>

CSS3之transform属性-2D转换
 

案例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>

CSS3之transform属性-2D转换