首页 > Web开发 > 详细

CSS3的3D属性及实现旋转立方体的方法详解

时间：2020-03-02 15:02:56      阅读：88      评论：0      收藏：0      [点我收藏+]

防疫不防学，逆战2020！

闲话少絮，切入正题：本文详细讲解css的3D常用属性，及其实现立方体的两种方式。

      首先我要明确x、y、z坐标轴的方向如何：3D即是三维空间，在3D空间内一般使用3D坐标轴确定元素位置，那么x、y、z坐标轴的方向如何？如果以屏幕正中心为3D空间的原点，以原点水平向右的方向为x轴线正方向，以原点水平向下的方向为y轴正方向，以垂直于屏幕穿过原点由屏幕向外（向我们射来）的方向为z轴的正方向，这种x、y、z轴构成的空间为基础，我们对元素的位置进行调整以达到我们需要的3D效果。

 

　　说起CSS的3D属性，在平面中我们对元素进行位置平移、旋转、缩放和倾斜，那么在3D中我们除了在x、y轴进行的操作外，增加了对z轴的操作。

 

 

3D变换的变形属性：transform

　　一、3D平面位移：

　　　　　　1、transform：translate3d(参数1,参数2,参数3);

　　　　　　　　　　*沿x、y、z轴同时位移

　　　　　　　　　　参数1：x轴移动的距离（正值沿着x轴往右）     

　　　　　　　　　　参数2：y轴移动的距离（正值沿着y轴往下）

　　　　　　　　　　参数3：z轴移动的距离（正值沿着z轴往外）

 

　　　　　　2、transform:translateX(参数)；

　　　　　　　　 　　*单独沿x轴进行位移

 

　　　　　　3、transform：translateY(参数)；

　　　　　　　　　　*单独沿y轴进行位移

 

　　　　　　4、transform：translateZ(参数)；

　　　　　　　　　　*单独沿z轴进行位移

 

 

　　二、3D旋转　

　　　　　　1、transform:rotateX(参数);

　　　　　　　　*参数为正值是绕着x轴顺时针旋转

　　　　　　2、transform:rotateY(参数);

　　　　　　　　*参数为正值是绕着y轴顺时针旋转

　　　　　　3、transform:rotateZ(参数);

　　　　　　　　*参数为正值是绕着z轴顺时针旋转

　　　　　　4、transform:rotate3d(x,y,z,a);

　　　　　　　　*绕着xyz轴同时旋转

　　　　　　　　x,y,z取值为 0或1，当值为1时表示允许沿着该轴线旋转，当值为零是表示不允许沿着该轴线旋转，a的值是旋转的度数。

 

　　在我们旋转的过程中要注意一个问题，我们x、y、z轴的坐标原点在元素的中心，也即是元素默认的的变形原点，当然变形原点可以通过transform-origin:参数1 参数2;

进行设置，我们第二种立方体的实现方法就需要对变形原点进行改变再平移旋转实现的，请看第二种实现方式给出的具体用法。

 

 

　　三、3D缩放

　　　　　　transform:scale3d(x,y,z)；*元素整体缩放

　　　　　　transform:scaleX();*沿着x轴缩放

　　　　　　transform:scaleY();*沿着y轴缩放

　　　　　　transform:scaleZ();*沿着z轴缩放

　　　　缩放的参数的取值小于1表示缩小，大于1表示放大，等于1表示不尽兴缩放。

 

 

在了解这些属性后，还有最重要的一个步骤，让该元素的父元素形成一个3D“舞台”，让其子元素能够在这个“舞台”中进行3d变换：transform-style:preserve-3d；

 
 
 
 
第一种实现立方体方法具体代码如下：
　　　　
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立方体1</title>
　　<style>
　　　　*{
　　　　　　margin:0;
　　　　　　padding:0;
　　　　}
　　　　.box{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　　　/* 设置装立方体的盒子在窗口居中 */
　　　　　　position:fixed;
　　　　　　left:0;right:0;
　　　　　　top:0;bottom:0;
　　　　　　margin:auto;
　　　　　　/* 设置盒子的偏转角度以便观察立方体的3d效果 */
　　　　　　transform:rotateX(45deg) rotateZ(45deg) rotateY(-90deg);
　　　　　　/* 使父元素box形成3d空间，支持子元素的3d属性设置 */
　　　　　　transform-style: preserve-3d;
　　　　　　background-color: pink;
　　　　}
　　　　.box div{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　　　text-align: center;
　　　　　　line-height:200px;
　　　　　　font-size: 80px;
　　　　　　font-weight:bolder;
　　　　　　color:#fff;
　　　　　　/* 使box下的所有div都定位到box左上角，重叠 */
　　　　　　position:absolute;
　　　　　　left:0;
　　　　　　top:0;
　　　　　　/* 是div透明度为50% */
　　　　　　opacity: 0.5;
　　　　}
　　　　/* 此时的con1--con6都重叠在box里面，我们开始进行位置的调整，使形成立方体 */
　　　　.con1{
　　　　　　background:lightblue;
　　　　　　/* 沿z轴正方向位移100p‘x ，作为正面*/
　　　　　　transform:translateZ(100px);
　　　　}
　　　　.con2{
　　　　　　background:lightcoral;
　　　　　　/* 沿z轴负方向位移100像素，并且绕Y轴旋转180度，背面 */
　　　　　　transform:translateZ(-100px) rotateY(180deg);
　　　　}
　　　　.con3{
　　　　　　background:lightgray;
　　　　　　/* 同理，立方体的顶 */
　　　　　　transform:translateY(-100px) rotateX(90deg);
　　　　}
　　　　.con4{
　　　　　　background:lightskyblue;
　　　　　　/* 立方体的底面 */
　　　　　　transform:translateY(100px) rotateX(-90deg);
　　　　}

　　　　.con5{
　　　　　　background:lightgoldenrodyellow;
　　　　　　/* 立方体的左侧面 */
　　　　　　transform:translateX(-100px) rotateY(-90deg);
　　　　}
　　　　.con6{
　　　　　　background:lightyellow;
　　　　　　/* 立方体的右侧面 */
　　　　　　transform:translateX(100px) rotateY(90deg);
　　　　}
</style>
</head>
<body>
　　<div class="box">
　　　　<div class="con1">1</div>
　　　　<div class="con2">2</div>
　　　　<div class="con3">3</div>
　　　　<div class="con4">4</div>
　　　　<div class="con5">5</div>
　　　　<div class="con6">6</div>
　　</div>
</body>
</html>

 

　　　　

 

第二种实现立方体方法具体代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立方体2</title>
　　<style>
　　　　*{
　　　　　　margin:0;
　　　　　　padding:0;
　　　　}
　　　　.box{
　　　　　　width:300px;
　　　　　　height:300px;
　　　　　　position:fixed;
　　　　　　left:0;right:0;
　　　　　　top:0;bottom:0;
　　　　　　margin:auto;
　　　　　　/* 3D的空间 */
　　　　　　transform-style: preserve-3d;
　　　　　　/* 为了方便观察让3D舞台转动角度 */
　　　　　　transform:rotateX(20deg) rotateY(30deg);
　　　　}
　　　　.box div{
　　　　　　width:300px;
　　　　　　height:300px;
　　　　　　text-align: center;
　　　　　　line-height:300px;
　　　　　　font-size: 100px;
　　　　　　font-weight:bolder;
　　　　　　color:#fff;
　　　　　　/* 让6个面全部定位在父元素里面 */
　　　　　　position:absolute;
　　　　　　left:0;top:0;
　　　　　　opacity: 0.5;
　　　　}
 
　　　　.con1{
　　　　　　background:blue;
　　　　　　/* 直接让第一个面绕着右侧的Y轴转90deg */
　　　　　　/* 改变变形原点 */
　　　　　　transform-origin:right center;
　　　　　　transform:rotateY(90deg);
　　　　}
　　　　.con2{
　　　　　　background:red;
　　　　　　/* 让第二个面绕着左侧的Y轴转90deg */
　　　　　　/* 改变变形原点 */
　　　　　　transform-origin:left center;
　　　　　　transform:rotateY(-90deg);
　　　　}
　　　　.con3{
　　　　　　background:pink;
　　　　　　/* 让第三个面绕着上面的X轴转90deg */
　　　　　　/* 改变变形原点 */
　　　　　　transform-origin: center top;
　　　　　　transform:rotateX(90deg);
　　　　}
　　　　.con4{
　　　　　　background:seagreen;
　　　　　　/* 让第四个面绕着下面的X轴转90deg */
　　　　　　/* 改变变形原点 */
　　　　　　transform-origin:center bottom;
　　　　　　transform:rotateX(-90deg);
　　　　}
　　　　.con5{
　　　　　　background:sienna;
　　　　　　/* 让第五个面往前位移300px */
　　　　　　transform:translateZ(300px);
　　　　}
　　　　.con6{
　　　　　　background:#000;
　　　　　　/* 让第六个面 旋转180 朝外显示 */
　　　　　　transform:rotateY(180deg);
　　　　}
　　</style>
　　</head>
　　<body>
　　　　<div class="box">
　　　　　　<div class="con1">1</div>
　　　　　　<div class="con2">2</div>
　　　　　　<div class="con3">3</div>
　　　　　　<div class="con4">4</div>
　　　　　　<div class="con5">5</div>
　　　　　　<div class="con6">6</div>
　　　　</div>
　　</body>
　　</html>
 
 
 
 
实现的立方体效果：
 
技术分享图片

 

 

 

　　

　　　　　　

CSS3的3D属性及实现旋转立方体的方法详解

原文：https://www.cnblogs.com/wangtianliang/p/12392916.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！