css06

最新推荐文章于 2025-08-15 21:07:05 发布

原创最新推荐文章于 2025-08-15 21:07:05 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css

从零开始学习HTML5 专栏收录该内容

8 篇文章

订阅专栏

css 2D、3D的转换

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

1、通过css3的转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸转换使元素改变形状、尺寸和位置的一种效果。可以使用2D、.3D来转换元素

2、2D转换方法：

（1）translate()

（2）rotate()

（3）scale()

（4）skew()

（5）matrix()

3、3D转换

（1）rotateX（）

（2）rotateY（）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>转换</title>
    <link rel="stylesheet" type="text/css" href="ch01.css">
</head>
<body>
    <div class="div">This is one css</div>
    <br/>
    <div class="div2">This is two css</div>
</body>
</html>

div{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    /*transform: rotate(30deg);*/
}
.div2{
    移动
    transform: translate(100px,100px);
    -webkit-transform: translate(100px,100px);safari chrome
    -ms-transform: translate(100px,100px);IE
    -o-transform: translate(100px,100px);opera
    -moz-transform: translate(100px,100px);Firefox
}
.div2{
    旋转
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);safari chrome
    -ms-transform: rotate(30deg);IE
    -o-transform: rotate(30deg);opera
    -moz-transform: rotate(30deg);firefox
}
.div2{
    缩放第一个参数是X轴缩放，第二个参数是Y轴缩放
margin-top: 100px;
transform: scale(1,2);
-webkit-transform: scale(1,2);safari chrome
-ms-transform: scale(1,2);IE
-o-transform: scale(1,2);opera
-moz-transform: scale(1,2);firefox
}

.div2{
    扭曲第一个参数是围绕X轴旋转的角度，第二个参数是围绕Y轴旋转的角度
    margin-top: 100px;
    transform: skew(50deg,50deg);
    -webkit-transform: skew(50deg,50deg);safari chrome
    -ms-transform: skew(50deg,50deg);IE
    -o-transform: skew(50deg,50deg);opera
    -moz-transform: skew(50deg,50deg);firefox
}

.div2{
    矩阵
    margin-top: 100px;
    transform: matrix(-1,-1,-1,1,0,1);
    -webkit-transform: matrix(-1,-1,-1,1,0,1);safari chrome
    -ms-transform: matrix(1,1,-1,0,0,0);IE
    -o-transform: matrix(1,1,-1,0,0,0);opera
    -moz-transform: matrix(1,1,-1,0,0,0);firefox
}

.div2{
    transform: rotateX(100deg);
    transform: rotateY(100deg);
    -webkit-transform: rotateX(100deg);
    -webkit-transform: rotateY(100deg);
}

css3的过渡

1、通过使用CSS3，可以给元素添加一些效果

2、CSS3过渡是元素从一种样式转化成另一种样式

动画效果的CSS

动画执行的时间

3、属性

a、translation 设置四个过渡属性

b、translation-property 过渡的名称

c、translation-duration 过渡效果花费的时间

d、translation-timing-function 过渡效果的时间曲线

e、translation-delay 过渡效果的开始时间

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>过渡</title>
    <link rel="stylesheet" type="text/css" href="ch02.css">
</head>
<body>
    <div>过渡</div>
</body>
</html>

div{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    transition: width 2s, height 2s, -webkit-transform 1s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 1s;

    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}
div:hover{
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

CSS的动画

1、通过CSS3可以创建一些动画

2、CSS3的动画需要遵循@keyframes规则

规定动画的时长

规定动画的名称

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动画</title>
    <link rel="stylesheet" type="text/css" href="ch03.css">
</head>
<body>
    <div>动画</div>
</body>
</html>

div{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation: anim 5s infinite alternate;
    -webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {
    0%{background-color: blueviolet; left: 0px; top: 0px}
    25%{background-color: blue; left: 100px; top: 0px}
    50%{background-color: aqua; left: 100px; top: 100px}
    75%{background-color: brown; left: 0px; top: 100px}
    100%{background-color: chartreuse; left: 0px; top: 0px}
}
@-webkit-keyframes anim {
    0%{background-color: blueviolet; left: 0px; top: 0px}
    25%{background-color: blue; left: 100px; top: 0px}
    50%{background-color: aqua; left: 100px; top: 100px}
    75%{background-color: brown; left: 0px; top: 100px}
    100%{background-color: chartreuse; left: 0px; top: 0px}
 }

CSS3多列

通过css3，能够创建多个列来对文本进行布局，像报纸那样

多列的属性

1、column-count 规定元素应该被分割的列数

2、column-gap 规定列之间的间隔

3、column-rule 设置列之间的宽度、样式和颜色规则

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多列</title>
    <link rel="stylesheet" type="text/css" href="ch04.css">
</head>
<body>
    <div class="div1">
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
        我们学习多列的属性样式等效果的编写！
    </div>
</body>
</html>

.div1{
    column-count: 3;
    column-gap: 100px;
    column-rule: 50px outset #00ff00;
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 50px outset #00ff00;
}

css3的瀑布流效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="ch05.css">
</head>
<body>
    <div class="container">
        <div><img src="img/1.jpg"><p>添加一个标签</p></div>
        <div><img src="img/2.jpg"><p>添加一个标签</p></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"><p>添加一个标签</p></div>
        <div><img src="img/5.jpg">></div>
        <div><img src="img/6.jpg"><p>添加一个标签</p></div>
        <div><img src="img/1.jpg"><p>添加一个标签</p></div>
        <div><img src="img/2.jpg"><p>添加一个标签</p></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"><p>添加一个标签</p></div>
        <div><img src="img/5.jpg">></div>
        <div><img src="img/6.jpg"><p>添加一个标签</p></div>
        <div><img src="img/1.jpg"><p>添加一个标签</p></div>
        <div><img src="img/2.jpg"><p>添加一个标签</p></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"><p>添加一个标签</p></div>
        <div><img src="img/5.jpg">></div>
        <div><img src="img/6.jpg"><p>添加一个标签</p></div>
        <div><img src="img/1.jpg"><p>添加一个标签</p></div>
        <div><img src="img/2.jpg"><p>添加一个标签</p></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"><p>添加一个标签</p></div>
        <div><img src="img/5.jpg">></div>
        <div><img src="img/6.jpg"><p>添加一个标签</p></div>
        <div><img src="img/1.jpg"></div>
        <div><img src="img/2.jpg"><p>添加一个标签</p></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"></div>
        <div><img src="img/5.jpg">></div>
        <div><img src="img/6.jpg"><p>添加一个标签</p></div>
        <div><img src="img/1.jpg"><p>添加一个标签</p></div>
        <div><img src="img/2.jpg"><p>添加一个标签</p></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"><p>添加一个标签</p></div>
        <div><img src="img/5.jpg">></div>
        <div><img src="img/6.jpg"><p>添加一个标签</p></div>
        <div><img src="img/1.jpg"><p>添加一个标签</p></div>
        <div><img src="img/2.jpg"><p>添加一个标签</p></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"><p>添加一个标签</p></div>
        <div><img src="img/5.jpg">></div>
        <div><img src="img/6.jpg"><p>添加一个标签</p></div>
    </div>
</body>
</html>

.container{
    column-width: 250px;
    column-gap: 5px;
    -webkit-column-width: 250px;
    -webkit-column-gap: 5px;
}
.container div{
    border: 1px solid chartreuse;
    width: 250px;
    margin: 5px;
}