CSS高级----转换

最新推荐文章于 2024-07-11 17:28:05 发布

B.Bz

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量79

点赞数

分类专栏： html5和css基础文章标签： css css3 html

本文链接：https://blog.csdn.net/bjsyc123456/article/details/120874016

版权

html5和css基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

2D转换

平移转换

语法：

/* X轴正向为右，Y轴正向为下 */
transform: translate(水平移动距离, 垂直移动距离);

translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离:translateX() & translateY()
用于未知元素宽高水平垂直居中

演示：

        .box1 {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        
        .box2 {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 给元素的移动添加一个过程  1秒 */
            transition: all 1s;
        }
        
        .box1:hover .box2 {
            /* 沿x轴移动父盒子的一半 + 宽度的一半 */
            /* 沿y轴移动父盒子的一半 + 高度的一半 */
            transform: translate(calc((500px / 2) - (200px /2)), calc((500px / 2) - (100px /2)))
        }

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

平移前：
在这里插入图片描述

平移后：

在这里插入图片描述

旋转转换

语法：

/* 角度单位是deg */
transform: rotate(角度);

取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

<!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>
        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* 添加动画过程 */
            transition: all 1s;
            background-color: pink;
        }
        
        body:hover div {
            /* 鼠标移动到body时div旋转360度 */
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

在这里插入图片描述

转换原点

语法：

transform-origin: 原点水平位置 原点垂直位置;

方位名词(left、top、right、bottom、center)
像素单位数值
百分比(参照盒子自身尺寸计算)

<!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>
        div {
            width: 50px;
            height: 200px;
            margin: 100px auto;
            /* 添加动画过程 */
            transition: all 1s;
            background-color: pink;
            /* 更换原点为中间的下面 */
            transform-origin: center bottom;
        }
        
        body:hover div {
            /* 鼠标移动到body时div旋转360度 */
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

在这里插入图片描述

缩放转换

语法：

transform: scale(x轴缩放倍数, y轴缩放倍数);

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放 transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小

<!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>
        div {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            /* 添加动画过程 */
            transition: all 1s;
            background-color: pink;
        }
        
        body:hover div {
            /* 鼠标移动到body时div放大2倍 */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

缩放前：

在这里插入图片描述
放大后：

3D转换

所谓的3D转换，又称为空间转换，是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
在这里插入图片描述

平移转换

语法：

transform: translate3d(x, y, z); 
transform: translateX(值);
transform: translateY(值);
transform: 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>
        div {
            width: 100px;
            height: 100px;
            /* 添加动画过程 */
            transition: all 1s;
            background-color: pink;
        }
        
        body:hover div {
            /* 鼠标移动到body时div沿x,y,z轴移动像素 */
            transform: translateX(50px) translateY(50px) translateZ(200px);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

在这里插入图片描述

`对比移动前移动后发现只沿x，y轴移动了，为什么没有沿x轴移动离我们变近呢？`

需要添加透视效果：
空间转换时，为元素添加近大远小、近实远虚的视觉效果

透视

语法：

/* 添加给转换元素的父元素 */
perspective: 值;

像素单位数值，数值一般在800 – 1200。
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

旋转变换

语法：

transform: rotateZ(值); 
transform: rotateX(值); 
transform: rotateY(值);

rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字

立体呈现

使用立体呈现的目的为：使子元素处于真正的3d空间,空间内，转换元素都有自已独立的坐标轴，互不干扰

语法：

transform-style: preserve-3d;

呈现立体图形步骤:

盒子父元素添加transform-style: preserve-3d;
按需求设置子盒子的位置(位移或旋转)

B.Bz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS高级----转换

2D转换平移转换语法：/* X轴正向为右，Y轴正向为下 */transform: translate(水平移动距离, 垂直移动距离);translate()如果只给出一个值, 表示x轴方向移动距离单独设置某个方向的移动距离:translateX() & translateY()用于未知元素宽高水平垂直居中演示： .box1 { width: 500px; height: 500px;
复制链接

扫一扫