css3基础笔记03-2d和3d过渡

最新推荐文章于 2024-07-30 11:54:26 发布

原创最新推荐文章于 2024-07-30 11:54:26 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用CSS实现2D和3D过渡效果，包括机器人样式的创建及过渡动画的应用。通过transform属性实现旋转、缩放等效果，并探讨了3D透视变换的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，2d过渡：
transform-origin：方向参照点；+transform:rotate(deg);角度
这里写图片描述
安卓机器人demo：

 <style>
 body{
  background-color: skyblue;
 } 
.robot{
/*   border: 1px solid gray; */
  margin: 50px auto;
  width: 400px;
  height: 400px;
}
.robot>div{
  background-color: yellowgreen;
}
/* 头部 */
.head{
  width: 230px;
  height: 105px;
  margin: 0 auto;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  position: relative;
}
/* 眼睛 */
.head::before,.head::after{
  content: "";
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: orange;
  position: absolute;/* 伪元素默认没有宽高需要通过定位或者转换成块级元素后设置 */
  top: 30px;
}
.head::before{
    left:50px;
}
.head::after{
  right: 50px;
}
/* 触须 */
.line{
  position: relative;
  width: 230px;/* 把line的宽度设置跟head的宽度一致，方便设置伪元素中的left和right的值。 使其以line为标准设置*/
  margin: 0 auto;
}
.line::before,.line::after{
  content: "";
  border-radius: 2px;
  width: 4px;
  height: 50px;
  background-color: yellowgreen;
  position: absolute;
  top: -20px;
  transform-origin:bottom;/* 设置触须旋转参照点 +  transform:rotate(20deg);*/
}
.line::before{
  left: 50px;
  transform:rotate(-20deg);
}
.line::after{
  right: 50px;
  transform:rotate(20deg);
}
/* 身体 */
.body{
  width: 230px;
  height: 170px;
  border-radius: 0 0 20px 20px;
  margin: 10px auto 0;
  position:relative;
}
.body::before,.body::after{
  content: "";
  border-radius: 2px;
  width: 50px;
  height: 170px;
  border-radius:25px;
  background-color: yellowgreen;
  position: absolute;
  transform-origin:top;/* 设置旋转中心点 */
}
.body::before{
  left: -60px;
}
.body::after{
  right: -60px;
}
/* 腿部 */
.foot{
  margin: -20px auto;
  width: 230px;
  position: relative;
}
.foot::before,.foot::after{
  content: "";
  border-radius: 20px;
  width: 50px;
  height: 120px;
  border-radius:25px;
  background-color: yellowgreen;
  position: absolute;
}
.foot::before{
  left: 40px;
}
.foot::after{
    right: 40px;
}
/* 添加过渡效果 */
/* *号无法匹配伪元素生成的标签 */
*,::before,::after{
  transition:all 1s;
}
.robot:hover .head::before{
  background-color: hotpink;
}
.robot:hover .head::after{
  background-color: hotpink;
}
.robot:hover .line::before{
  transform:rotate(-45deg);
}
.robot:hover .line::after{
  transform:rotate(-45deg);
}
.robot:hover .body::before{
  transform:rotate(30deg);
}
.robot:hover .body::after{
  transform:rotate(30deg);
}
.robot:hover .foot::before{
  /* 第一种方式height */
 /*  height: 150px; */
/*  第二种方式：图形可能会发生改变，根据需求进行选择 */
  transform:scaleY(1.3);
}
.robot:hover .foot::after{
  transform:scaleY(1.3);
}

  </style>

</head>
<body>
<!-- div.robot>div.line+div.head+div.body+div.foot -->
  <div class="robot">
    <div class="line"></div>
    <div class="head"></div>
    <div class="body"></div>
    <div class="foot"></div>
  </div>
</body>

二，3d过渡
3D效果：x轴，y轴，z轴
※，为了能够有一个3d的一个透视效果需要为旋转对象的父元素添加透视属性。perspective。
3d效果旋转时，离我越近视觉效果越大，离我越远视觉效果越小。
透视属性：
设置的是 3D变换的元素距离浏览器的距离。
沿着z轴旋转看不出效果。
perspective：1000px;
transform:translateZ(100px);

<script type="text/javascript">
    // 获取 一些必要的变量
    var imgs = document.querySelectorAll('img');
    var output = document.querySelector('output');

    // 输入的 时候触发
    document.querySelector('#range').oninput = function (){
        // 获取 当前的值

        // 计算为角度  0-360的旋转 range 0-100
        var deg = Math.floor(this.value / 100 * 360);

        // 分别设置给三个img标签
        imgs[0].style.transform = 'rotateX('+deg+'deg)';
        imgs[1].style.transform = 'rotateY('+deg+'deg)';
        imgs[2].style.transform = 'rotateZ('+deg+'deg)';

        // 修改 output的文本质
        output.innerHTML = deg;
    }