网页设计HTML和css（7）

最新推荐文章于 2024-09-02 19:53:00 发布

weixin_44795592

最新推荐文章于 2024-09-02 19:53:00 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/weixin_44795592/article/details/103436064

版权

本文详细介绍了CSS3的transform属性，包括旋转、缩放、倾斜和移动四种变换处理。重点阐述了transform坐标系统，指出默认情况下变换是以元素中心为原点，可通过transform-origin改变原点位置。同时，提到了不同变换类型对于原点位置变化的响应情况。

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

css3变换、过渡和动画

一.css3变换：transform

定义：通过css3 transform,能够对元素进行旋转（ratate）、缩放（scale）、倾斜（skew）、移动（translate），这四种变换处理

属性	描述
transform	向元素应用2D或3D变换
transform-origin	改变被变换元素的原点位置
transform-style	被嵌套元素如何在3D空间中显示
perspective	3D元素的透视效果
perspective-origin	3D元素的底部位置
backface-visibility	元素在不面对屏幕是是否可见

1.transform坐标系统：

使用transform所参照的并不是初始坐标系统，而是一个新的坐标系统，相比初始坐标系统，x、y、z轴的指向都不变，但原点位置是元素的中心。如果想要改变transform坐标系统的原点位置，可以使用transform-origin，默认值是50% 50%。
如果没有使用transform-origin改变元素原点位置，CSS3旋转、缩放、倾斜和移动的变形操作都是以元素中心位置进行的。若使用transform-origin改变了元素原点位置，CSS3旋转、缩放和倾斜变形操作以更改后的原点位置进行，但位移变形操作始终以元素中心位置进行。

2.语法：

在这里插入图片描述

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李佳</title>
    <style type="text/css">
        .box,.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8{
     width: 200px;  height: 100px;  border:2px solid black; margin: 0 auto}
        .box9,.box10,.box11,.box12,.box13{
      width: 200px;  height: 200px;  border:2px solid black;   margin: 200px auto; }
        .box .a{
      width: 200px;  height: 100px;  background-color: #f0e5cd;  transform: scale(0.8,0.8);  }
        .box1 .a1{
      width: 200px;  height: 100px;  background-color: #f0e5cd;  transform:scaleX(1.2)  }
        .box2 .a2{
      width: 200px;  height: 100px;  background-color: #f0e5cd;  transform:scaleY(1.2)  }

        .box3 .b3{
      width: 200px;  height: 100px;  background-color: #fffa7c;  transform:skew(10deg,10deg)  }
        .box4 .b4{
      width: 200px;  height: 100px;  background-color: #fffa7c;  transform:skewX(10deg)  }
        .box8 .b8{
      width: 200px;  height: 100px;  background-color: #fffa7c;  transform:skewY(5deg);}

        .box5 .c5{

最低0.47元/天解锁文章