【css3】04-css3转换

摸爬打滚的小M

已于 2024-05-22 15:51:53 修改

阅读量338

点赞数 4

分类专栏： CSS3 文章标签： css3 前端 css

于 2024-05-22 15:50:58 首次发布

本文链接：https://blog.csdn.net/m0_68467925/article/details/139121387

版权

CSS3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1 2D转换

2 3D转换

3 案例：旋转的魔方

1 2D转换

## 2D转换
☞ 位移
   transform: translate(100px,100px);
   备注：
      位移是相对元素自身的位置发生位置改变

☞ 旋转
       transform: rotate(60deg);
   备注：
       取值为角度
☞ 缩放
   transform: scale(0.5,1);
       备注：
           取值为倍数关系，缩小大于0小于1，放大设置大于1
☞ 倾斜
   transform: skew(30deg,30deg);
    备注：
       第一个值代表沿着x轴方向倾斜
       第二个值代表沿着y轴方向倾斜
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box {
			height: 100px;
			background-color: pink;
		}

		.one {
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 0 auto;
		}

		.box:hover .one {

			/* 2d转换位移： 改变元素位置 */
			transform: translate(100px, 0px);

			/* 缩放：设置的是倍数 */
			/* transform: scale(0.5,1); */
            /*旋转*/
			/* transform: rotate(60deg); */
            /*倾斜*/
			/* transform: skew(30deg,30deg); */
		}
	</style>
</head>

<body>

	<div class="box">

		<div class="one">asdfafd</div>
	</div>
</body>

2 3D转换

## 3D转换
☞ 位移
   transform: translateX() translateY() translateZ()

☞ 旋转
   transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);

☞ 缩放
   transform: scaleX(0.5) scaleY(1) scaleZ(1);
☞ 倾斜
transform: skewX(30deg) skewY();

☞ transform-style: preserve-3d;
   将平面图形转换为立体图形
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.one {
			width: 500px;
			height: 500px;
			border: 1px solid red;
			margin: 100px auto;

			/* 透视: 在网页中实现近大远小; 结合translateZ(200px)使用 在垂直页面的方向移动*/
			perspective: 1000px;
		}

		.box {
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 200px;
		}

		.one:hover .box {
			transform: translateZ(200px);
		}
	</style>
</head>

<body>

	<div class="one">

		<div class="box"></div>
	</div>
</body>

3 案例：旋转的魔方

会自动旋转，鼠标扫过时暂停旋转

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

         ul {
             list-style: none;
             margin:0;
             padding:0;
         }
         .box {
              width: 300px;
              height: 300px;
              margin: 150px auto;
              position: relative;
              font-size: 50px;
              /*perspective: 1000px;*/
              transform-style: preserve-3d;

              animation: rotate 10s linear infinite alternate;
         }
        
         .box>div {
              width: 300px;
              height: 300px;
              position: absolute;
         }
         .right {
             background-color: transparent;
             transform: rotateY(90deg) translateZ(150px);
         }
         .left {
             background-color: transparent;
             transform: rotateY(-90deg) translateZ(150px);
         }

         .top {
              background-color: transparent;
              transform: rotateX(90deg) translateZ(150px);
         }

        .bottom {
             background-color: transparent;
             transform: rotateX(-90deg) translateZ(150px);
        }

        .before {
             background-color: transparent;
             transform: translateZ(150px);
        }

        .back {
             background-color: transparent;
             transform: translateZ(-150px);
        }

        li {
             float: left;
             width: 90px;
             height: 90px;
             border-radius: 20px;
             margin: 5px;
             text-align: center;
             line-height: 90px;
        }

        .before li {
            background-color: green;
        }
         .back li {
             background-color:chartreuse;
         }

         .top li {
              background-color: purple;
         }

         .bottom li {
              background-color: cornflowerblue;
         }

         .left li {
              background-color: darkorange;
         }

         .right li {
              background-color: #37ffc7;
         }

        .box:hover {
             animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }

            20% {
                transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
            }

            40% {
                transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
            }

            60% {
                transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
            }

            80% {
                transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
            }

            100% {
                transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
            }
        }
    </style>
</head>
<body>
        <div class="box">
            <div class="before">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="back">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="top">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="bottom">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="left">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
        </div>
</body>
</html>