CSS3-3D技术（逆战班）

 CSS-3D技术顾名思义，就是可以实现3D效果的技术，这项技术在前端开发中有着广泛的应用。想要展示3D效果，就需要有3D空间，我们一般用3D坐标系来作为参考，但是CSS3中的3D坐标与一般的3D坐标有一点区别，相当于其绕着X轴旋转了180度；x轴左边是负的，右边是正的，y轴 上面是负的， 下面是正的，z 轴里面是负的， 外面是正的。下面是CSS3-3D技术的几种属性：perspective（透视）;电脑屏幕呈现的是2D的平面，图像之所以具有立体感，其实是一种视觉的呈现，而通过perspective属性就可以做到；一般设置给父元素，可以作用于所有3D转换的子元素，透视的特点为近大远小。translate（移动）;translate3d(x,y,z),其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值.rotate(旋转)；rotateX(xxdeg) : 就是沿着 x 立体旋转；rotateY(xxdeg)：沿着y轴进行旋转rotateZ(xxdeg)：沿着z轴进行旋转；注：“xx”为旋转的度数，“deg”为角度单位“度”。

开门案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>开门大吉</title><style>section {width: 450px;height: 300px;border: 1px solid #000;margin: 100px auto;background: url(images/3.jpg) no-repeat;position: relative;perspective: 1000px; /*给父盒子增加透视*/}.door-left,.door-right {position: absolute;width: 50%;height: 100%;background-color: pink;transition: all 1s; /*连个门都是过渡*/}.door-left {left: 0;border-right: 1px solid #000;transform-origin:left; /*旋转中心点*/}.door-right {right: 0;border-left: 1px solid #000;transform-origin:right;  /*旋转中心点*/}.door-left::after,.door-right::after {content: "";position: absolute;top: 50%;width: 10px;height: 10px;border: 1px solid #000;border-radius: 50%;transform: translateY(-50%); /*自己高度的一半*/}.door-left::after {right: 5px;}.door-right::after {left: 5px;}/* 鼠标经过section，两个门进行翻转 */section:hover .door-right {transform: rotateY(130deg);}section:hover .door-left {transform: rotateY(-130deg);}</style>
</head>
<body><section><div class="door-left"></div><div class="door-right"></div></section>
</body>
</html>

CSS3-3D技术（逆战班）相关推荐

手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2 ...
CSS3 动画属性 - 逆战班
1.transition: 过渡 transition :过渡效果的 CSS 属性的名称完成过渡效果需要多少秒或毫秒速度效果的速度曲线过渡效果何时开始 1)过渡效果的 CSS 属性的名称(一般有 ...
【Web动画】CSS3 3D 行星运转浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
3D视觉艺术大师班-C4D和Octane渲染学习教程
3D视觉艺术大师班-C4D和Octane渲染学习教程 MP4 |视频:h264,1280×720 |音频:AAC,48 KHz,2通道语言:英语+中英文字幕(根据原英文字幕机译更准确).持续时间:3 ...
Maya初学者完整的3D动画大师班视频教程
Maya初学者完整的3D动画大师班视频教程时间13小时30分包括课程项目文件 1280X720 MP4 语言:英语+中文字幕(根据原英文字幕机译更准确)+原英文字幕教程大小解压后:8.38G M ...
8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
CSS3 3D的总结（初学者易懂）
CSS3 3D案例的总结如果要说是3D的基础概念,首先我就来说一说rotateX().rotateY().rotateZ()这几个属性 rotateX():对应的是3D模型中的X轴上的旋转,传入的参 ...
[应用][js+css3]3D盒子导航[PC端]
CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...
7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构以8张图片的3D轮播图为例,它的基本H ...

CSS3-3D技术（逆战班）

CSS3-3D技术（逆战班）相关推荐

最新文章

热门文章