41.css3设置变形(平移和旋转)

最新推荐文章于 2023-08-12 23:45:51 发布

Keeling1720

最新推荐文章于 2023-08-12 23:45:51 发布

阅读量726

点赞数

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/116406134

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

文章目录

css3设置变形

css3设置变形

变形是指通过css来改变元素的形状或位置

变形不会影响到页面布局
使用transform来设置变形效果

css3设置平移（translateX、translateY、translateZ）

计算机一般以屏幕最左上角为原点，向右是x轴正方向，向下是y轴正方向，向外，面向我们是z轴正方面（没有旋转的话）。
使用transfrom设置变形，

值translateX让元素沿着x轴平移
值translateY让元素沿着Y轴平移
值translateZ让元素沿着Z轴平移

详见代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin:0 auto;
            margin-top: 100px;
            transform: translateX(100px) translateY(-50px);
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

显示：
在这里插入图片描述
向x轴和y轴移动的我们都看了，那直接设置向y轴移动是什么效果呢？说实话，是啥效果都没有，因为在z轴的移动是立体效果，默认情况下浏览器是不支持透视的，如果一定要用，一定要看的话，那就给html属性先加一个perspective属性（一般设置600-1200 px，表示屏幕到页面的距离）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移</title>
    <style>
        html{
            perspective: 800px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 100px auto;
            transform: translateZ(100px);
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: tomato;
            /*用来对比变化*/
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

显示：（上面是向z轴移动了100px的200200的div，下面是土生土长的200200的div）
在这里插入图片描述

css3设置图片突起加阴影效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置突起和阴影</title>
    <style>
        body{
            background-color: #bfa;
        }

        .box1,.box2{
            width: 200px;
            height: 300px;
            background-color: #fff;
            float: left;
            margin: 0 10px;
            transition: all .3s;
        }

        .box1:hover{
            transform: translateY(-4px);
            box-shadow: 0 0 10px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

显示：
在这里插入图片描述
鼠标移入效果：（有种凸出来的赶脚，然后有层阴影）

css3设置旋转（rotateX、rotateY、rotateZ）

通过旋转可以使元素沿着x、y或者z轴旋转指定的角度（单位deg表示度，turn表示圈）
直接用代码演示rotateX效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style>
        html{
            perspective: 800px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin: 200px auto;
            /*设置过渡时间为2s*/
            transition: 2s;
        }

        body:hover .box1{
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

原先显示：
在这里插入图片描述
当鼠标进入body的框内，则会慢慢变成这样：

然后我们演示一个rotateY的效果，同样设置角度为45deg（旋转后效果）：

然后我们再演示一下，之前说的旋转之后z轴就不一样了是几个意思：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style>
        html{
            perspective: 800px;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin: 200px auto;
            /*设置过渡时间为2s*/
            transition: 2s;
        }

        body:hover .box1{
            transform: rotateY(45deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

刚开始显示：
在这里插入图片描述
进入body后，可以明显看到，他不仅旋转了，还会向右边移动，如下图：

注意：先旋转后平移跟先平移后旋转最后的效果是不一样的。（有兴趣的可以自己尝试一下）

transform: rotateY(45deg) translateZ(100px);/* 先旋转后平移 /
transform: translateZ(100px) rotateY(45deg);/ 先平移后旋转 */

Keeling1720

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
41.css3设置变形(平移和旋转)

文章目录css3设置变形css3设置平移（translateX、translateY、translateZ）css3设置变形变形是指通过css来改变元素的形状或位置变形不会影响到页面布局使用transform来设置变形效果css3设置平移（translateX、translateY、translateZ）使用transfrom设置变形，值translateX让元素沿着x轴平移值translateY让元素沿着Y轴平移值translateZ让元素沿着Z轴平移详见代码，如下：<
复制链接

扫一扫