css3带你实现3D转换效果


Posted in HTML / CSS onFebruary 24, 2022

前言

在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴。在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D转换的功能相似。

三维坐标系

相信学过数学的效果版对这一概念多多少少是知道的,我们要想有一个3D空间效果,也就是立体空间感,比如:正方体、长方体.....再比如我们生活所居住的房间也是3D立体空间的,主要有X轴、Y轴Z轴共同组成

css3带你实现3D转换效果

x轴 : 水平向右,x右边是正值,左边是负值。

y轴 : 垂直向下,y下面是正值,上面是负值。

z轴 : 垂直屏幕,往外面是正值,往里面是负值。

转换属性

属性 描述
transform 使得元素向2D或3D转换
transform-origin 改变转换元素的位置
transform-style 规定被嵌套元素如何在 3D 空间中显示
perspective 规定 3D 元素的透视效果
perspective-origin 规定 3D 元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见

这里transform属性和transform-origin属性在前一篇《css3中2D转换之有趣的transform形变效果》中已经讲解了,这里就不再细说。不同的是在3D转换中,transform-origin属性会接收第三个值,表示Z轴方向位置

(1)transform-style

transform-style设置元素的子元素是位于 3D 空间中还是平面中。

语法:

div{
    transform-style: flat|preserve-3d;
}

flat:设置元素的子元素位于该元素的平面中(子元素不设置3D空间)

<!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>Document</title>
    <style>
        .box{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: .5s;
            /* flat:子元素不存在3D空间 */
            transform-style: flat;
            background-color: #eee;
        }
        .box:hover{
            transform: rotateY(60deg);
        }
        .s{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        .s2{
            background-color: orange;
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="s s1"></div>
        <div class="s s2"></div>
    </div>
</body>
</html>

设置flat值,子元素就只位于平面中,效果如下:

css3带你实现3D转换效果

preserve-3d:设置元素的子元素应用于3D空间中

基于上述栗子,将transform-style属性值改为preserve-3d

.box{
  /* 让子元素保持3d立体空间环境 */
  transform-style: preserve-3d;
}

得到3D空间效果:

css3带你实现3D转换效果

3D视觉是不是感觉一下就来啦~

(2)perspective

perspective指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并且变换结果中将不存在景深概念

z>0 的三维元素比正常大,而 z<0 时则比正常小,大小程度由该属性的值决定

“perspective”本身就具有透视的意思,就是设置用于户和元素3D空间Z平面之间的距离(视距),简单理解就是将电脑屏幕当做一个平面,用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远,视觉效果很小,值越小3D效果就越明显。

css3带你实现3D转换效果

语法:

div{
   perspective:none | <length>
}
  • none:默认值,与 0 相同,不设置透视
  • length:元素距离视图的距离,以像素计

这里还是以上述栗子进行演示:

body{
    perspective: 900px;
}

或者

.box{
    perspective: 900px;
}

只要设置在父盒子上就可以,效果如下:

css3带你实现3D转换效果

从第一眼就可以看出与上面不同,没有设置景深是这样:

css3带你实现3D转换效果

设置了景深是这样的:

css3带你实现3D转换效果

注意:perspective属性只影响 3D 转换元素,并且同时使用perspective-origin属性,可以改变 3D 元素的底部位置

(3)perspective-orgin

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

语法:

perspective-origin: x-axis y-axis;

x-position:指定消失点的横坐标,其值有以下形式:

<length-percentage>长度值或相对于元素宽度的百分比值,可为负值。

  • left, 关键字,0值的简记。
  • center, 关键字,50%的简记。
  • right, 关键字,100%的简记。

y-position:指定消失点的纵坐标,其值有以下形式:

  • <length-percentage>长度值或相对于元素高度的百分比值,可为负值。
  • top, 关键字,0值的简记。
  • center, 关键字,50%的简记。
  • bottom, 关键字,100%的简记

介绍完语法使用,我们知道了怎么取值,下面还是基于上述例子继续演示:

值为长度值:

.box{
    perspective-origin: 300px;
}

效果如下:

css3带你实现3D转换效果

值为关键字:

.box{
    perspective: 900px;
    perspective-origin: left;
}

效果如下:

css3带你实现3D转换效果

值为百分比:

.box{
    perspective: 900px;
    perspective-origin: 300%;
}

效果如下:

css3带你实现3D转换效果

两个值:

.box{
    perspective: 900px;
    perspective-origin: left top;
}

效果如下:

css3带你实现3D转换效果

(4)backface-visibility

backface-visibility指定当元素背面朝向观察者时是否可见

元素的背面是其正面的镜像,虽然在 2D 中不可见,但是当变换导致元素在 3D 空间中旋转时,背面可以变得可见。 (此属性对 2D 变换没有影响,它没有透视。)

语法:

backface-visibility: visible|hidden;
  • visible:默认值。 背面是可见的。
  • hidden:背面是不可见的

这里借鉴了MDN上面的例子:

<!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>Document</title>
    <style>
        .showbf div {
          backface-visibility: visible;
        }
        
        .hidebf div {
          backface-visibility: hidden;
        }
        .container {
          width: 150px;
          height: 150px;
          margin: 75px 0 0 75px;
          border: none;
        }
        
        .cube {
          width: 100%;
          height: 100%;
          perspective: 550px;
          perspective-origin: 150% 150%;
          transform-style: preserve-3d;
        }
        
        .face {
          display: block;
          position: absolute;
          width: 100px;
          height: 100px;
          border: none;
          line-height: 100px;
          font-family: sans-serif;
          font-size: 60px;
          color: white;
          text-align: center;
        }
        
        .front {
          background: rgba(0, 0, 0, 0.3);
          transform: translateZ(50px);
        }
        
        .back {
          background: rgba(0, 255, 0, 1);
          color: black;
          transform: rotateY(180deg) translateZ(50px);
        }
        
        .right {
          background: rgba(196, 0, 0, 0.7);
          transform: rotateY(90deg) translateZ(50px);
        }
        
        .left {
          background: rgba(0, 0, 196, 0.7);
          transform: rotateY(-90deg) translateZ(50px);
        }
        
        .top {
          background: rgba(196, 196, 0, 0.7);
          transform: rotateX(90deg) translateZ(50px);
        }
        
        .bottom {
          background: rgba(196, 0, 196, 0.7);
          transform: rotateX(-90deg) translateZ(50px);
        }
        
        th, p, td {
          background-color: #EEEEEE;
          margin: 0px;
          padding: 6px;
          font-family: sans-serif;
          text-align: left;
        }
    </style>
</head>
<body>
    <table>
      <tr>
        <th><code>backface-visibility: visible;</code></th>
        <th><code>backface-visibility: hidden;</code></th>
      </tr>
      <tr>
        <td>
          <div class="container">
            <div class="cube showbf">
              <div class="face front">1</div>
              <div class="face back">2</div>
              <div class="face right">3</div>
              <div class="face left">4</div>
              <div class="face top">5</div>
              <div class="face bottom">6</div>
            </div>
          </div>
          <p>
            Since all faces are partially transparent,
            the back faces (2, 4, 5) are visible
            through the front faces (1, 3, 6).
          </p>
        </td>
        <td>
          <div class="container">
            <div class="cube hidebf">
              <div class="face front">1</div>
              <div class="face back">2</div>
              <div class="face right">3</div>
              <div class="face left">4</div>
              <div class="face top">5</div>
              <div class="face bottom">6</div>
            </div>
          </div>
          <p>
            The three back faces (2, 4, 5) are
            hidden.
          </p>
        </td>
      </tr>
    </table>
</body>
</html>

3D转换

旋转单位:deg(角度)、rad(弧度)、grad(梯度)、turn(圈)

  1. 弧度 = 角度*π/180
  2. grad = 360度(一圈)

(1)3D位移

3D位移在2D基础上多加了一个可以z轴移动的方向

3D位移主要演示translateZtranslate3d两个属性:

translate3d()CSS 函数在3D空间内移动一个元素的位置,这个移动由一个三维向量来表达,分别表示他在三个方向上移动的距离

<!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>3D位移</title>
    <style>
body{
    perspective: 800px;
} 
.box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition: .5s;
    background-color: pink;
    text-align: center;
    line-height: 200px;
}
.box:hover{
    /* transform: translateX(50px) translateY(100px) translateZ(200px); */
    /* 简写 */
    transform: translate3d(50px,100px,200px);
}
    </style>
</head>
<body>
    <div class="box">3D位移</div>
</body>
</html>

效果如下:

css3带你实现3D转换效果

注意:

  1. 首先要设置perspectiv属性在被观察元素的父盒子上,不然不会有Z轴效果。
  2. 如果只是单独设置Z轴视距,可以直接使用translateZ属性。
  3. Z轴设置的值越大,距离我们眼睛就越近,也就是简单理解元素被放大了
  4. Z轴设置的值越小,或者为负数,则会离我们眼睛越远,元素缩小

(2)3D旋转

  • rotateX:让元素围绕X轴转
  • rotateY:让元素围绕Y轴旋转
  • rotateZ:让元素围绕Z轴旋转
  • rotate3d:让元素围绕固定轴旋转不变形

旋转量由角度决定,角度为正则顺时针旋转,反之逆时针旋转

<!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>3D旋转</title>
    <style>
body{
    perspective: 800px;
} 
.box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition: .5s;
    background-color: pink;
    text-align: center;
    line-height: 200px;
}
.box:hover{
    transform: rotateX(180deg); /* X轴旋转180° */
    transform: rotateY(180deg); /* Y轴旋转180° */
    transform: rotateZ(180deg); /* Z轴旋转180° */
}
    </style>
</head>
<body>
    <div class="box">3D旋转</div>
</body>
</html>

X轴旋转效果:

css3带你实现3D转换效果

Y轴旋转效果:

css3带你实现3D转换效果

Z轴旋转效果:

css3带你实现3D转换效果

这里单独将rotate3d函数拎出来讲

语法:

rotate3d(x, y, z, a)

取值分析:

  • x:可以是0到1之间的数值,表示旋转轴X坐标方向的矢量
  • y:可以是0到1之间的数值,表示旋转轴Y坐标方向的矢量
  • z:可以是0到1之间的数值,表示旋转轴Z坐标方向的矢量
  • a:表示旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转

也就是说rotateX(a) === rotate3d(1,0,0,a)、rotateY(a) === rotate3d(0,1,0,a)、rotateZ(a) === rotate3d(0,0,1,a)

.box:hover{
    transform: rotate3d(1,1,0,50deg); /* 表示在X轴和Y轴旋转50° */
}

效果如下:

css3带你实现3D转换效果

.box:hover{
    transform: rotate3d(1,1,1,1turn); /* 围绕3轴旋转一圈 */
}

效果如下:

css3带你实现3D转换效果

综合案例

基于上述所学内容,我们来实操做一个3D盒子旋转:

html结构:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>3D盒子旋转</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <section>
            <div><img src="images/1.jpg" alt="" /></div>
            <div><img src="images/2.jpg" alt="" /></div>
            <div><img src="images/3.jpg" alt="" /></div>
            <div><img src="images/4.jpg" alt="" /></div>
            <div><img src="images/5.jpg" alt="" /></div>
            <div><img src="images/6.jpg" alt="" /></div>
            <div><img src="images/1.jpg" alt="" /></div>
            <div><img src="images/2.jpg" alt="" /></div>
            <div><img src="images/3.jpg" alt="" /></div>
            <div><img src="images/4.jpg" alt="" /></div>
            <div><img src="images/5.jpg" alt="" /></div>
            <div><img src="images/6.jpg" alt="" /></div>
        </section>
    </body>
</html>

css部分:

* {
    /* 初始化 */
    padding: 0;
    margin: 0;
}
body {
    /* 弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 视距 */
    perspective: 1000px;
}
section {
    position: relative;
    width: 150px;
    height: 150px;
    /* 让子元素保留其3D位置 */
    transform-style: preserve-3d;
    /* 动画 名称 时长 linear 是匀速运动 infinite是无限次播放 */
    animation: rotate 5s linear infinite;
}
section div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: all 1s;
}
section div img {
    width: 100%;
    height: 100%;
}
/* 这里使用的伪类选择器 */
section div:nth-child(1) { /* 选择第1个元素 */
    transform: translateZ(75px);
}
section:hover div:nth-child(1) {
    transform: translateZ(200px);
}
section div:nth-child(2) { /* 选择第2个元素 */
    transform: rotateX(-180deg) translateZ(75px);
}
section:hover div:nth-child(2) {
    transform: rotateX(-180deg) translateZ(200px);
}
section div:nth-child(3) { /* 选择第3个元素 */
    transform: rotateX(90deg) translateZ(75px);
}
section:hover div:nth-child(3) {
    transform: rotateX(90deg) translateZ(200px);
}
section div:nth-child(4) { /* 选择第4个元素 */
    transform: rotateX(-90deg) translateZ(75px);
}
section:hover div:nth-child(4) {
    transform: rotateX(-90deg) translateZ(200px);
}
section div:nth-child(5) { /* 选择第5个元素 */
    transform: rotateY(90deg) translateZ(75px);
}
section:hover div:nth-child(5) {
    transform: rotateY(90deg) translateZ(200px);
}
section div:nth-child(6) { /* 选择第6个元素 */
    transform: rotateY(-90deg) translateZ(75px);
}
section:hover div:nth-child(6) {
    transform: rotateY(-90deg) translateZ(200px);
}
section div:nth-child(7) { /* 选择第7个元素 */
    transform: translateZ(75px);
}
section div:nth-child(8) { /* 选择第8个元素 */
    transform: rotateX(-180deg) translateZ(75px);
}
section div:nth-child(9) { /* 选择第9个元素 */
    transform: rotateX(90deg) translateZ(75px);
}
section div:nth-child(10) { /* 选择第10个元素 */
    transform: rotateX(-90deg) translateZ(75px);
}
section div:nth-child(11) { /* 选择第11个元素 */
    transform: rotateY(90deg) translateZ(75px);
}
section div:nth-child(12) { /* 选择第12个元素 */
    transform: rotateY(-90deg) translateZ(75px);
}

/* 定义动画 */
@keyframes rotate {
    0% {
        transform: rotateY(0) rotateX(0);
    }
    100% {
        transform: rotateY(360deg) rotateX(360deg);
    }
}

效果如下

css3带你实现3D转换效果

到此这篇关于css3带你实现3D转换效果的文章就介绍到这了,更多相关css3 3D转换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
企业开发CSS命名BEM代码规范实践
CSS3实现360度循环旋转功能
CSS实现九宫格布局(自适应)的示例代码
Feb 12 #HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 #HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 #HTML / CSS
HTTP中的Content-type详解
Jan 18 #HTML / CSS
You might like
PHP生成Gif图片验证码
2013/10/27 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
javascript数据类型详解
2017/02/07 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python 同时读取多个文件的例子
2019/07/16 Python
Keras自定义IOU方式
2020/06/10 Python
python里glob模块知识点总结
2021/01/05 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
校班主任推荐信范文
2013/12/03 职场文书
年会活动策划方案
2014/01/23 职场文书
工作会议方案
2014/05/21 职场文书
模特大赛策划方案
2014/05/28 职场文书
森林病虫害防治方案
2014/06/02 职场文书
美术学专业求职信
2014/07/23 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
业务员辞职信范文
2015/03/02 职场文书
简历自我评价范文
2019/04/24 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
JavaScript前端面试组合函数
2022/06/21 Javascript