【2D变形与3D变形】

最新推荐文章于 2024-11-07 09:14:33 发布

pemole

最新推荐文章于 2024-11-07 09:14:33 发布

阅读量385

点赞数 6

文章标签： 3d 前端 css

本文链接：https://blog.csdn.net/2401_84341509/article/details/138239450

版权

本文详细介绍了CSS3中2D和3D变形的各种属性，如旋转、缩放、平移和扭曲，以及transform-style和perspective的使用。通过实例演示了如何在HTML中实现立体效果和动态动画。

摘要由CSDN通过智能技术生成

文章目录

前言
一、2D变形
二、3D变形

前言

在css3中有很多神奇好用的效果，这篇文章将会告诉你关于变形的一些知识点。

提示：以下是本篇文章正文内容，下面案例可供参考

一、2D变形

1.注意：

（1）变形是对图形做修改，不会对盒子占据的空间做修改
（2）变形的参考点是图形的中心点
transform-origin:X Y;
X Y是具体的像素值，图形的左上角是00点。
（3）多个变形可以同时使用
transform:变形1 变形2…;
注意变形先后顺序会影响最终结果

2.旋转变形

transform:rotate(？deg)
正值：顺时针旋转
负值：逆时针旋转

 .box1{
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        transform: rotate(30deg);
    }

在这里插入图片描述

3.缩放变形

transform:scale(x[,y])

 .box2{
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        transform: scale(1.2);
    }

在这里插入图片描述

4.平移变形

transform:translate(x,y)

  .box3{
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        transform: translate(50px,50px);
    }

在这里插入图片描述

5.扭曲变形

transform:skew(x[,y])

  .box4{
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        transform:skew(30deg);
    }

在这里插入图片描述

二、3D变形

1.transform-style:flat|preserve-3d

约束子元素怎么样在空间显示：
flat 2d空间
preserve-3d 3d空间显示

2.perspective:none|number

此属性相当于视距属性
视距越大，越平面化，视距越近，越立体化（注意：尽量不要超过1000

视距500

视距5000
在这里插入图片描述

变形属性都有三个方向的变形：

	scaleX() scaleY()  scaleX()
	rotateX rotateY  rotateZ
	translateX  translateY translateZ
	skewX  skewY  skewZ

案例

      <!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>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body,html{
		width: 100%;
		height: 100%;
		background-color: #000;
	}
    body{
		perspective: 1000;
		-webkit-perspective: 1000;
	}
    .list{
        margin: 150px auto;
        width: 200px;
        height: 300px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(-20deg);

         animation: move 5s linear;
         animation-iteration-count: infinite;

    }
    li{
       position: absolute;
       width: 100%;
       height: 100%;
       background-image: url(./vx.jpg);
       background-size: cover;
       
       -webkit-box-reflect:below 20px linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0.3));
   
    }
    li:nth-child(1){
      transform: translateZ(350px);
    }
    li:nth-child(2){
      transform: rotateY(45deg)  translateZ(350px);
    }
    li:nth-child(3){
      transform: rotateY(90deg)  translateZ(350px);
    }
    li:nth-child(4){
      transform: rotateY(135deg)  translateZ(350px);
    }
    li:nth-child(5){
      transform: rotateY(180deg)  translateZ(350px);
    }
    li:nth-child(6){
      transform: rotateY(225deg)  translateZ(350px);
    }

    li:nth-child(7){
      transform: rotateY(270deg)  translateZ(350px);
    }
    li:nth-child(8){
      transform: rotateY(315deg)  translateZ(350px);
    }
 
</style>
</head>
<body>
 <ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

在这里插入图片描述