css Learning7

最新推荐文章于 2024-05-20 11:15:42 发布

派大星你在那做什么

最新推荐文章于 2024-05-20 11:15:42 发布

阅读量144

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44451988/article/details/109749170

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css3 2D、3D转换、过渡

- 综合写法：transform:translate() rotate() scale() 综合写法时translate()放在最前边(3d无影响)
2D转换
3D转换
过渡
- transition
精灵图片
- 什么是精灵图片
- 如何使用

综合写法：transform:translate() rotate() scale() 综合写法时translate()放在最前边(3d无影响)

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
转换的效果是让某个元素改变形状，大小和位置。

2D转换

2D 转换方法：

translate()

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：指定对象X轴（水平方向）的平移
translatey()：指定对象Y轴（垂直方向）的平移

参数值为百分比时，是盒子本身的宽高*百分比

div
{
/*translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。*/
	transform: translate(50px,100px);
	-ms-transform: translate(50px,100px); /* IE 9 */
	-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate()

指定对象的2D rotation（2D旋转），需先有 <’ transform-origin '> 属性的定义

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale()

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。参数为缩放倍数，无单位。

scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：指定对象X轴的（水平方向）缩放
scaley()：指定对象Y轴的（垂直方向）缩放

/*scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。*/
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

在这里插入图片描述

skew()

语法：transform:skew(angle [,angle]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。

skew()：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：指定对象X轴的（水平方向）扭曲
skewy()：指定对象Y轴的（垂直方向）扭曲

div
{
/*skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。*/
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

3D转换

rotateX/rotateY

rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()：指定对象在x轴上的旋转角度
rotatey()：指定对象在y轴上的旋转角度
rotatez()：指定对象在z轴上的旋转角度

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

transform-origin

设置旋转元素的基点位置

语法：transform-origin: x-axis y-axis [z-axis];

x-axis：定义视图被置于 X 轴的何处。可能的值：
left / center / right / length / %
y-axis：定义视图被置于 Y 轴的何处。可能的值：
left / center / right / length / %
z-axis：定义视图被置于 Z 轴的何处。可能的值：
length

div
{
	transform: rotate(45deg);
	transform-origin:20% 40%;
	-ms-transform: rotate(45deg); /* IE 9 */
	-ms-transform-origin:20% 40%; /* IE 9 */
	-webkit-transform: rotate(45deg); /* Safari and Chrome */
	-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

transform-style

规定被嵌套元素如何在 3D 空间中显示。

语法：transform-style: flat | preserve-3d;
flat：表示所有子元素在2D平面呈现。
preserve-3d：表示所有子元素在3D空间中呈现。

/*让转换的子元素保留3D转换：*/
div
{
    transform: rotateY(60deg);
    transform-style: preserve-3d;
    -webkit-transform: rotateY(60deg); /* Safari and Chrome */
    -webkit-transform-style: preserve-3d; /* Safari and Chrome */
}

perspective

规定 3D 元素的透视效果。

语法：perspective: number | none;
number 元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。

/*设置从何处查看一个元素的角度：*/
div
{
    perspective: 500;
    -webkit-perspective: 500; /* Safari and Chrome */
}

过渡

transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

过渡属性：

值	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

transition: all .5s ease-in .1s;

精灵图片

什么是精灵图片

我们在网页上我们可以看到有很多的小图标，
，因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载，如果将这些图标分别存在服务器上，那么当需要显示的时候将会发出很多次请求–>响应–>下载，这样一来将会消耗大量的时间来下载这些小图标。
以为了提高网页响应速度，避免这个小图标加载耗费大量时间，于是将这些小图片全部放到一张图片上。如下图：
在这里插入图片描述

如何使用

首先在需要引入精灵图片的容器中引入背景图
background-image: url(“精灵图片地址”);
在这里插入图片描述
然后通过坐标调整精灵图片位置：
background-position: x坐标 y坐标;

一般x，y坐标取负值(精灵图片向左、向上移动)，移动到合适位置(我们想要的小图标在容器中刚好显示出来时)，即完成精灵图片的使用。

<!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>
        div {
            width: 114px;
            height: 172px;
            border: 1px solid salmon;
            background-image: url("../img/spirit.jpg");
            float: left;
        }
        
        .box {
            width: 100px;
            background-position: -536px -257px;
        }
        
        .box2 {
            background-position: -253px -656px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box2"></div>

</body>

</html>

在这里插入图片描述

派大星你在那做什么

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css Learning7

css3 2D、3D转换、过渡2D转换translate()rotate()scale()skew()3D转换rotateX/rotateYtransform-origintransform-styleperspective过渡transition精灵图片什么是精灵图片如何使用CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置。2D转换2D 转换方法：translate()translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从
复制链接

扫一扫