24.CSS-2D转换

最新推荐文章于 2024-03-07 13:53:15 发布

山楂不甜

最新推荐文章于 2024-03-07 13:53:15 发布

阅读量107

点赞数

分类专栏：笔记 css 文章标签： css css3 html js

本文链接：https://blog.csdn.net/Veronnit/article/details/118926652

版权

笔记同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

css

31 篇文章 2 订阅

订阅专栏

文章目录

2D转换

2D转换

transform属性

作用：能够对元素进行移动、旋转、缩放和倾斜的属性。

格式：
transform：translate()； 从当前位置移动元素，第一个参数是水平方向，第二个参数是垂直方向。

transform：rotate()； 旋转元素，需要说明角度。例如：transform：rotate(45deg)；
默认是以Z轴旋转，也可以写成transform: rotateZ(45deg);
围绕X轴旋转：transform: rotateX(45deg);
围绕Y轴旋转：transform: rotateY(45deg);

transform：scale()； 缩放元素，第一个参数是水平方向，第二个参数是垂直方向。注意点：如果取值是1，代表不变；如果取值大于1，代表需要放大；如果取值小于1，代表需要缩小；如果水平和垂直缩放都一样，那么可以简写为一个参数。

注意点

1.如果需要进行多个转换，那么用空格隔开
2.2D的转换模块会修改元素的坐标系，所以旋转之后再平移就不再是水平平移，而是会根据旋转了多少度，坐标系就会旋转多少度。

transform-origin属性

默认情况下所有元素的旋转都是以自己的中心点作为参考点来旋转的。而参考点可以通过transform-origin属性来进行修改。

格式：

/*左上角*/
transform-origin: 0px 0px;
/*右上角*/
transform-origin: 200px 0px;

第一个参数是水平方向，第二个参数是垂直方向。

注意点

取值有三种形式：
具体像素
百分比
特殊关键字：
center,center居中
left，top左上角

perspective属性

透视属性。
什么是透视属性？
近大远小。
在这里插入图片描述

注意点

透视属性一定要添加到需要呈现近大远小效果的父元素上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>96-2D转换练习</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 310px;
      height: 438px;
      background-color: black;
      border: 1px solid #000;
      margin: 100px auto;
      perspective: 500px;
    }
    div img{
      transform-origin: center bottom;
      transition: transform 1s;
    }
    div:hover img{
      transform: rotateX(80deg);
    }
  </style>
</head>
<body>
<div>
  <img src="images/pk.png">
</div>
</body>
</html>

山楂不甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
24.CSS-2D转换

文章目录2D转换transform属性注意点transform-origin属性注意点perspective属性注意点2D转换transform属性作用：能够对元素进行移动、旋转、缩放和倾斜的属性。格式：transform：translate()；从当前位置移动元素，第一个参数是水平方向，第二个参数是垂直方向。transform：rotate()；旋转元素，需要说明角度。例如：transform：rotate(45deg)；默认是以Z轴旋转，也可以写成transform: rotateZ(
复制链接

扫一扫

专栏目录