CSS(6)__CSS基本用法<2D属性和3D特效>

最新推荐文章于 2023-03-16 14:50:07 发布
最新推荐文章于 2023-03-16 14:50:07 发布
阅读量503 收藏 1
点赞数
分类专栏： CSS 文章标签： html5 3d 2d css3 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/richard_xx/article/details/76697117
版权

1、CSS3 2D transform 属性

l transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform的属性包括：rotate( ) 旋转/ skew( ) 倾斜/ scale( ) 缩放/ translate( ) 平移，分别还有x、y之分，比如：rotatex( ) 和 rotatey( ) ，以此类推。



l  2D transform常用的功能:



Ø rotate() 旋转，用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

例：rotate(30deg)把元素顺时针旋转 30 度。

Ø 缩放 scale，scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。

用法：transform: scale(0.5) 或者transform: scale(0.5, 2);

参数表示缩放倍数；

1）一个参数时：表示水平和垂直同时缩放该倍率

2）两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

例：scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

Ø 倾斜 skew，用法：transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

1）一个参数时：表示水平方向的倾斜角度；

2）两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

例：skew(30deg,20deg)围绕X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

X轴和Y轴角度总数加起来不能大于90deg；这个值可以为负数。

Ø translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。

用法：transform: translate(45px)  或者 transform: translate(45px, 150px);

参数表示移动距离，单位px，

1）一个参数时：表示水平方向的移动距离；

2）两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

   例：translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

Ø 简单了解matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。

Matrix是transform的一个子集，基本语法transform: matrix(a, c, b, d, tx, ty);

a, c, b, d是一个二维矩阵:

   ┌     ┐

   │ a b │

   │ c d │

   └     ┘

tx, ty就是就是基于X和Y 坐标重新定位元素。

tx, ty参数值在各个浏览器下有差异：

firefox浏览器下tx, ty除了0值之外必须只用长度单位值（“px”，“em”等）或者使用百分数。

l 基准点 transform-origin（了解）

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

用法：transform-origin: 10px 10px;

共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

2、CSS3 3D 转换


CSS3中的3D坐标系如下图：



l CSS3 允许您使用 3D 转换来对元素进行格式化。

l transform--style属性指定嵌套元素是怎样在三维空间中呈现。语法：transform-style:flat|preserve-3d;

参数：flat     子元素将不保留其 3D 位置。

      preserve-3d     子元素将保留其 3D 位置。

3D transform中有下面这三个方法：

Ø rotateX(angle ) 旋转X轴

Ø rotateY(angle ) 旋转Y轴

Ø rotateZ(angle ) 旋转Z轴



l  3D transform常用的功能:

Ø translate3d()：移元素元素，用来指定一个3D变形移动位移量

Ø translate()：指定3Ｄ位移在Ｚ轴的位移量。

Ø scale3d()：用来缩放一个元素。

Ø scaleZ():指定Z轴的缩放向量。

Ø rotate3d()：指定元素具有一个三维旋转的角度。

Ø rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。

Ø perspective()：指定一个透视投影矩阵。

Ø matrix3d()：定义《》矩阵变形。

l perspective(length)为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大（大于立方体尺寸2倍以上）那就是站在非常远的地方看（立方体已经成了小正方形了）。

当元素没有设置perspective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果。如果设置perspective(length)后，将会看到三维的效果。默认的透视视角中心在容器(是perspective所在的元素，不是他的后代元素)的 中点，也就是 perspective-origin: 50% 50%。当然你也可以自己设置，比如：左上角perspective-origin: 0px 0px；。


l  综合以上两点，我们可以通过几个实例，来深入了解下perspective(length);  和  transform-style:preserve-3d；

　　　（1）当设置perspective(length);不设置transform-style:preserve-3d；当元素静止时，会有立体的效果：


（2）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：

　（3）当设置transform-style:preserve-3d；不设置perspective(length);当元素静止时，不会有立体的效果。



　（4）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：




（5）只有当两个值都设置，不管是静止还是旋转，都会看到立体的效果。



3：动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、必要元素：

a、通过@keyframes指定动画序列；

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间




 .animation {
            width: 30px;
            height: 30px;
            animation: change 5s infinite;
        }
        /*动画相比过渡可以控制更多细节，可以将一个动画拆成多个步骤*/
        
        @keyframes change {
            0% {
                width: 30px;
                height: 30px;
                background-color: yellow;
            }
            25% {
                width: 300px;
                background-color: blue;
            }
            50% {
                width: 30px;
                height: 300px;
                background-color: green;
            }
            100% {
                width: 300px;
                height: 300px;
                background-color: pink;
            }
        }


<body>
    <div class="animation"></div>
</body>


animation-timing-function动画执行速度，linear、ease等




e、animation-play-state动画播放状态，running(默认)、paused(暂停)等

f、animation-direction动画逆播，alternate等

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。


g、animation-fill-mode动画执行完毕后状态，forwards、backwards等



h、animation-iteration-count动画执行次数，inifinate(无限次数)等，默认是1

参数值的顺序：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意



.animation {
            width: 30px;
            height: 30px;
            background-color: blue;
            /*动画名称*/
            animation-name: change;
            /*动画持续时间*/
            animation-duration: 1s;
            /*动画结束后的状态*/
            animation-fill-mode: none;
            /*无限次播放*/
            animation-iteration-count: infinite;
            /*动画延时*/
            animation-delay: 1s;
            /*动画暂停*/
            animation-play-state: running;
            /*动画反方向*/
            animation-direction: alternate;
            /*动画速度*/
            animation-timing-function: linear;
        }   
        @keyframes change {
            0% {
                width: 40px;
                height: 40px;
            }
            100% {
                width: 200px;
                height: 200px;
            }
        }
    <div class="animation"></div>



以下是我用css3D做的一个小练习的代码(供大家参考)： 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.vi{ perspective:600px;}

.cu{ width:250px; height:250px;
   perspective:50% 50%;
   transform-style:preserve-3d;
   margin:200px auto;
   animation:ait01 3s linear 20s infinite;}
@keyframes ait01{ 100%{ transform:rotate3d(1, 1, 1, 360deg)}}
   
.it1{ width:250px; height:250px; 
   position:absolute; opacity:0.8;
   font-size:32px; color:#000; text-align:center; line-height:250px;
   border:1px #0000CC solid;
    background-color:#F96; z-index: 6;
    transform-origin:left;
    animation:ait1 2s linear 1s both;}
@keyframes ait1{ 100%{ transform:rotateY(-90deg)}}
    
    
.it2{ width:250px; height:250px; 
   position:absolute; opacity:0.8;
   font-size:32px; color:#000; text-align:center; line-height:250px;
   border:1px #0000CC solid;
    background-color:#F96; z-index: 5;
    transform-origin: right;
    animation:ait2 2s linear 5s both;}
@keyframes ait2{ 100%{ transform:rotateY(90deg)}}
    
    
.it3{ width:250px; height:250px; 
   position:absolute; opacity:0.8;
   font-size:32px; color:#000; text-align:center; line-height:250px;
   border:1px #0000CC solid;
    background-color:#F96; z-index: 4;
    transform-origin: top;
    animation:ait3 2s linear 8s both;}
@keyframes ait3{ 100%{ transform:rotateX(90deg)}}
    
    
.it4{ width:250px; height:250px; 
   position:absolute; opacity:0.8;
   font-size:32px; color:#000; text-align:center; line-height:250px;
   border:1px #0000CC solid;
    background-color:#F96; z-index: 3;
    transform-origin: bottom;
    animation:ait4 2s linear 12s both;}
@keyframes ait4{ 100%{ transform:rotateX(-90deg)}}
    
    
.it5{ width:250px; height:250px; 
   position:absolute; opacity:0.8;
   font-size:32px; color:#000; text-align:center; line-height:250px;
   border:1px #0000CC solid;
    background-color:#F96; z-index: 2;
    animation:ait5 2s linear 15s both;}
@keyframes ait5{ 100%{ transform:translateZ(250px)}}
    
    
.it6{ width:250px; height:250px; 
   position:absolute; opacity:0.8;
   font-size:32px; color:#000; text-align:center; line-height:250px;
   border:1px #0000CC solid;
    background-color:#F96;z-index: 1;
    animation:ait6 2s linear 18s both;}
@keyframes ait6{ 100%{ transform:rotateY(180deg)}}
    
    
</style>
</head>

<body>

   <div class="vi">
      <div class="cu">
           <div class="it1">左</div>
            <div class="it2">右</div>
            <div class="it3">上</div>
            <div class="it4">下</div>
            <div class="it5">前</div>
            <div class="it6">后</div>
        </div>
   </div>
</body>
</html>


Richard_xx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
主要介绍了使用CSS3中的transform属性进行2D和3D变换的基本用法,文中同时介绍了使用perspective-origin定义初始位置的方法,需要的朋友可以参考下
CSS6大种选择器(超详细!!!!!!)
热门推荐
weixin_52682014的博客
11-05 2万+
注意：1.所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）/* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px *//* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 *//*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 *//* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */语法：[属性值*=属性名]{} */作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。
【css教程】web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
Dontla的博客
03-27 768
文章目录什么是定位？定位组成（定位模式+边偏移）定位模式static relative absolute fixed边偏移定位模式——静态定位static（平时用不到）就是标准流定位模式——相对定位relative（重要）定位模式——绝对定位absolute绝对定位（父级无定位）绝对定位（父级或父级的父级有定位【相对定位、绝对定位、固定定位】）绝对定位脱离标准流，不再占有之前位置子绝父相（子元素用绝对定位，父元素用相对定位）定位模式——固定定位fixed（不随页面滚动移动）固定定位（以版心位置定位）定位模式
CSS学习6
aneyal的博客
03-15 403
CSS三大特性、盒子模型
CSS(6)——CSS汇总整理
qq_34573534的博客
08-10 133
精通DIV + CSS Meta（了解就行） 1、div span 2、三种样式表 内联样式(行内样式) 嵌入样式 外部样式 就近原则 3、常见样式 复合样式 background border css单位 % px em background-color color border-style ...
小白做立方体的艰辛历程
dudulela的博客
06-06 254
首先我
css-(1).zip_css_css属性手册 web
09-19
css 属性使用手册 适用于web css程序员使用
CSS3彩色进度条加载动画_CSS3_动画特效_
09-30
CSS3 彩色进度条加载动画 带进度百分比
CSS2.rar_css 3d文件盒_盒模式示意图
09-23
CSS2盒模型的3D示意图,深入理解CSS盒模型。
CSS6：层次选择器
工一木子
08-22 365
6、层次选择器 2.2、层次选择器 1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你 body p { background-color: red; } 2、子选择器：一代，儿子 body>p { background-color: #740c80; } 3、相邻兄弟选择器:同辈 .active + p { background-color: aqua; } 4、通用选择器 .active~p { background-color: blue
HTML和CSS6小时入门经典视频教程.zip
04-27
非常好的学习网站制作的资料，里面含视频和源码，源码最好自己跟着视频学习打比较好可以快速学习。
CSS6（复合选择器2）
m0_56147997的博客
03-16 66
下面继续讲解复合选择器的后两种
CSS 6 CSS 盒子模型
谢谢你们的关注
10-26 346
CSS 6 CSS 盒子模型
css6
weixin_30344795的博客
07-23 72
但是p标签不能套块级元素。 a标签不能套a标签 这个这个是居中。 行级元素都会底对齐，比如img和文字就会出现底对齐无法图文混排，要加float才能实现图文混排。 但是又有一个很特殊的 就是出现这种情况 有一个可以解决上面问题。 转载于:https://www.cnblogs.com/czk666/p/9356491.html...
CSS 2D动画效果
bear_huangzhen的专栏
09-19 755
示例1（盾牌动画）： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盾牌动画</title> <link rel="shortcut icon" href="bkq.ico" type="ima...
CSS6 盒子模型
weixin_44055272的博客
03-22 306
什么是盒子模型 1，html的所有的元素都可看作一个嵌套的盒子，可以设置下图中任何一个有文字表示的内容 从外到内分别由content，padding填充，border边框，margin 2.盒子模型的最简单的实例：发现实际上有颜色的部分和页面边距相差50px 最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的：...
CSS2D效果
dum_plings的博客
10-21 445
1、CSS3过渡 通过CSS3，我们可以在不适用Flash动画或javaScript的情况下， 当元素从一种样式变换为另一种样式时为元素添加效果。 IE10、Firefox、Chrome以及Opera支持transition属性。 Safari需要前缀 -webkit- IE9以及更早的版本，不支持transition属性。 Chrome25以及更早的版本，需要前缀 -webkit- 要实现这一...
CSS6
weixin_30685047的博客
06-22 109
1.引用自己的字体 ：@font-face自己取得名字不要和已有的起冲突 写法：@font-face{font-family:自己取得名字；src=url();} .div1{font-family:自己取得名字} 2.字体图标（就是一种字体 ）：优点：a.提高网页性能 b.无限放大不失真 c.为响应式布局提供优秀图片解决方案 ...
Html设置css的4种方式和css 6种声明方式
aosica321的专栏
02-08 3096
来源：http://www.pdjz.qdedu.net/showarticle.asp?articleid=1959 css 层叠样式表  引入层叠样式表的方法包括： 1，外联式样式表 2，内嵌样式表 3，元素内定 4，导入样式表 外联式样式表 例： .... 属性：rel 用来说明元素在这里要完成的任务是连接一个独立的cs
用HTML写一个好看的3D烟花特效
最新发布
09-13
### 回答1： 可以使用HTML的`canvas`元素和JavaScript来创建3D烟花特效。下面是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <title>3D烟花特效</title> <style> canvas { background-color: black; width: 100%; height: 100%; } </style> </head> <body> <canvas id="fireworks"></canvas> <script> // 获取canvas元素 const canvas = document.getElementById('fireworks'); // 获取canvas的绘图上下文 const ctx = canvas.getContext('2d'); // 定义烟花类 class Firework { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.particles = []; } // 绘制烟花 draw() { // 遍历所有烟花粒子并绘制 for (const particle of this.particles) { ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); } } // 更新烟花状态 update() { // 遍历所有烟花粒子并更新其位置 for (const particle of this.particles) { particle.x += particle.vx; particle.y += particle.vy; particle.vy += 0.1; // 重力 particle.radius *= 0.97; // 缩小粒子半径 } } } // 定义动画循环函数 function animate() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 遍历所有烟花并更新和绘制 for (const firework of fireworks) { firework.update(); firework.draw(); } // 调用动画循环函数 requestAnimationFrame(animate); } // 定义烟花数组 const fireworks = []; // 点击画布时生成一个新的烟花 canvas ### 回答2： 要使用HTML编写一个好看的3D烟花特效，可以使用CSS和JavaScript来实现。 首先，使用HTML创建一个包含画布的容器元素，并设置其宽高与页面适配。例如： ```html <div id="fireworks-container"></div> ``` 接下来，使用CSS样式设置容器的背景色和位置为相对定位。例如： ```css #fireworks-container { position: relative; background-color: black; width: 100%; height: 100vh; } ``` 然后，在JavaScript中编写烟花的逻辑。可以使用canvas元素来绘制烟花的效果。通过设置定时器，每隔一段时间创建一个新的烟花，并在画布上绘制其轨迹和爆炸效果。例如： ```javascript const container = document.getElementById('fireworks-container'); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; container.appendChild(canvas); function createFirework() { // 在画布上绘制烟花轨迹和爆炸效果 } function animate() { // 更新画布，循环调用createFirework和动画效果 requestAnimationFrame(animate); } animate(); ``` 最后，在createFirework函数中编写绘制烟花效果的逻辑。可以使用绘制圆形和矩形等基本图形，然后通过逐帧动画来模拟烟花的运动和爆炸效果。例如： ```javascript function createFirework() { const firework = { x: Math.random() * canvas.width, y: canvas.height, color: getRandomColor(), ... // 其他烟花参数 }; // 绘制烟花轨迹 ctx.beginPath(); ctx.moveTo(firework.x, firework.y); ctx.lineTo(firework.x + Math.random() * 10 - 5, firework.y - Math.random() * 100 - 100); ctx.strokeStyle = firework.color; ctx.lineWidth = 2; ctx.stroke(); // 绘制烟花爆炸效果 ctx.fillStyle = firework.color; ctx.fillRect(firework.x, firework.y - 2, 2, 2); } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 更新烟花状态和位置 for (let i = 0; i < fireworks.length; i++) { const firework = fireworks[i]; // 更新烟花状态和位置 // ... // 绘制烟花 // ... } requestAnimationFrame(animate); } animate(); ``` 以上是一个简化的例子，您还可以根据个人偏好和设计需求对烟花特效进行进一步的优化和美化。 ### 回答3： 要用HTML写一个好看的3D烟花特效，可以通过CSS和JavaScript来实现。 首先，可以创建一个HTML页面，并使用CSS为页面设置背景颜色或背景图片，以营造烟花效果的场景。 接下来，在HTML文件的`<head>`标签中引入CSS和JavaScript文件。在CSS文件中，可以使用`@keyframes`关键字来定义烟花的动画效果。可以设置烟花图案的初始位置、大小、颜色、透明度等属性，并在关键帧中逐渐改变这些属性值，使烟花图案呈现出爆炸的效果。 在JavaScript文件中，可以使用`document.createElement()`方法创建一个`<div>`元素，用于表示烟花的形状。然后，在页面加载时使用`setInterval()`方法来触发一个函数，该函数会在一定时间间隔内创建多个烟花元素，并设置它们的CSS样式和动画效果。可以使用`Math.random()`方法来随机生成烟花的位置和速度，使烟花呈现出不同的爆炸效果。 在函数内部，可以通过`appendChild()`方法将烟花元素添加到页面的特定位置上，从而实现烟花的飞行和爆炸效果。还可以使用`setTimeout()`方法来设置一段时间后将烟花元素从页面中移除，以达到烟花逐渐消失的效果。 在整个过程中，可以通过调整CSS和JavaScript中的参数和属性来调整烟花的外观和动画效果，以实现一个好看的3D烟花特效。最后，可以保存并运行HTML文件，即可在浏览器中看到这个炫目的3D烟花特效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值