使用 CSS 变形学习笔记

最新推荐文章于 2024-04-28 06:56:08 发布

我是希希呀biubiubiu

最新推荐文章于 2024-04-28 06:56:08 发布

阅读量276

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_35095321/article/details/77162545

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、CSS transforms 属性

transform-origin： transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
transform：指定作用在元素上的变形。取值为空格分隔的一系列变形的列表。

实例1

嵌套了百度页面内容的iframe，以左下角为中心旋转90度

<div style="transform: rotate(90deg); transform-origin: bottom left;">
  <iframe src="http://www.baidu.com/" width="500" height="600"></iframe>
</div>

实例2

被倾斜了 10 度并且在 X 轴方向上进行了 150 像素的偏移。
实例2

<div style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
</div>

二、perspective 属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。

perspective的值，则是决定3D变形效果的强度的，这个值大致可以理解为远近。值越大，你离物体就越远。就像一个离你很远的正方体（比如魔方）在做旋转，他的视觉效果就比较弱，但是如果这个魔方在你的眼前旋转，那么效果就比较强烈。

实例

perspective

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

语法

perspective-origin: x-axis y-axis;

0px 0px代表元素的左上顶点(top,left)，100% 100%代表元素的右下顶点(bottom,right)。

值

x-axis

定义该视图在 x 轴上的位置。
默认值：50%。
可能的值： left | center | right | length | %

y-axis

定义该视图在 y 轴上的位置。
默认值：50%。
可能的值： top | center | bottom | length | %

实例

perspective-origin

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
#div1
{
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding:10px;
    border: 1px solid black;
    perspective:150;
    perspective-origin: 10% 10%;
    -webkit-perspective:150; /* Safari and Chrome */
    -webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}

#div2
{
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg); /* Safari and Chrome */
}

</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>

三、backface-visibility

backface-visibility 属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的，当其朝向观察者时，显示正面的镜像。

语法

backface-visibility: visibility

backface-visibility: visible
backface-visibility: hidden

值

visibility关键字，指定元素背面是否可见，可为以下值：
visible 表示背面可见，允许显示正面的镜像。初始值
hidden 表示背面不可见。

四、transform-style属性

transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

如果被扁平化，则子元素不会独立的存在于三维空间。

因为该属性不会被（自动）继承，所以必须为元素所有非叶后代节点设置该属性。

语法

transform-style: preserve-3d
transform-style: flat

值

preserve-3d指定子元素定位在三维空间内。
flat指定子元素位于此元素所在平面内。初始值

我是希希呀biubiubiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 CSS 变形学习笔记

一、CSS transforms 属性transform-origin： transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用； transform：指定作用在元素上的变形。取值为空格分隔的一系列变形的列表。实例1嵌套了百度页面内容的iframe，以左下角为中心旋转90度 <div style="transform:
复制链接

扫一扫

专栏目录