2D-旋转效果

最新推荐文章于 2022-08-29 23:08:00 发布

只字不留

最新推荐文章于 2022-08-29 23:08:00 发布

阅读量302

点赞数

本文链接：https://blog.csdn.net/qq15045846160/article/details/88640629

版权

一、形变中心点
1、默认情况下，所有的元素都是以自己的中心点进行旋转的，可以通过形变中心点来改变。
2、transform-origin： 0 0；
第一个参数：水平方向
第二个参数：垂直方向
注意点：取值有三种形式
1.具体像素（50px 50px）
2.百分百（50% 50%）
3.特殊关键字left center bottom

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2D-形变中心点</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            ul{
                width: 100px;
                height: 100px;
                border: 1px solid #000;
                margin: 100px auto;
                position: relative;
            }
            ul li{
                list-style: none;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0px;
                top: 0px;
                transform-origin: 0 0;
            }
            ul li:nth-child(1){
                background-color: pink;
                transform: rotate(45deg);
            }
            ul li:nth-child(2){
                background-color: blue;
                transform: rotate(60deg);
            }
            ul li:nth-child(3){
                background-color: yellow;
                transform: rotate(75deg);
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

正常情况下的中心点：
在这里插入图片描述
使用transform-origin后的中心点：

二、旋转轴向
1、transform：rotateZ（45deg）；以Z轴旋转。
2、transform：rotateX（45deg）；以X轴旋转。
3、transform：rotateY（45deg）；以Y轴旋转。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2D-旋转轴向</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            img{
                width: 200px;
                height: 200px;
            }
            ul{
                width: 800px;
                height: 500px;
                margin: 0 auto；
                /*perspective: 500px;*/
            }
            ul li{
                list-style: none;
                width: 200px;
                height: 200px;
                margin: 0 auto;
                margin-top: 50px;
                border: 1px solid #000;
            }
            ul li:nth-child(1) img {
			transform: rotateZ(45deg)
            }
            ul li:nth-child(2) img{
                transform: rotateX(45deg)
            }
            ul li:nth-child(3) img{
                transform: rotateY(45deg)
            }
        </style>
    </head>
    <body>
        <ul>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

默认情况下所有元素都是围绕Z轴进行旋转的。在这里插入图片描述
改变旋转轴向之后：

/*
透视属性：近大远小（值大，效果弱）。
注意：透视属性一定要添加到需要呈现近大远小效果元素的父元素上面（爷爷也可以）
*/
perspective: 500px;
效果如下：