一.API

函数                      |   描述
-----------------------------------
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)    |   定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)      |   定义 3D 转化。
translateX(x)           |   定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)           |   定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)           |   定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)          |   定义 3D 缩放转换。
scaleX(x)               |   定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)               |   定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)               |   定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)   |   定义 3D 旋转。
rotateX(angle)          |   定义沿 X 轴的 3D 旋转。
rotateY(angle)          |   定义沿 Y 轴的 3D 旋转。
rotateZ(angle)          |   定义沿 Z 轴的 3D 旋转。
perspective(n)          |   定义 3D 转换元素的透视视图。

3D转换坐标轴
这里写图片描述

二.其他css3

(1)transform-origin , 改变中心点,

transform-origin: left top(左上角) | right top(右上角) | 50% 100%(底边线中间点位置)
目前我认为left top 和 right top没啥区别,left bottom 和 right bottom没啥区别,可能是应用不多的原因,还没有发现其中的奥妙

三.制作一个六面体

3D转换坐标轴会随着rotate3d转换,所以我认为应该最后完成旋转动作
chrome直接打开运行

<!DOCTYPE html>
<html>
<head>
    <title>六面体</title>
    <style type="text/css">
        .wrapper{
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            position: absolute;
            left: 200px;
            top: 100px;
            -webkit-transform:rotateX(-20deg) rotateY(45deg);
            transform:rotateX(-20deg) rotateY(45deg);
            transform-style: preserve-3d;
        }
        .wrapper .d{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: white;
            font-size: 30px;
            width: 100px;
            height: 100px;
            background: #006600;
            position: absolute;
        }
        /* 最后再做旋转 */
        .wrapper .d1{
            background: #33CC99;
            opacity: 0.5;
            transform: translateY(50px) translateZ(50px) rotateX(-90deg);
        }
        .wrapper .d2{
            background: #33FFFF;
            opacity: 0.5;
            transform: translateY(-50px) translateZ(50px) rotateX(-90deg);
        }
        .wrapper .d3{
            background: #666666;
            opacity: 0.5;
            transform: translateX(-50px) translateZ(50px) rotateY(90deg);
        }
        .wrapper .d4{
            background: #66FF33;
            opacity: 0.5;
            transform: translateX(50px) translateZ(50px) rotateY(90deg);    
        }
        .wrapper .d5{
            background: #993366;
            opacity: 0.5;
        }
        .wrapper .d6{
            background: yellow;
            opacity: 0.5;
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="d d1">1</div>
        <div class="d d2">2</div>
        <div class="d d3">3</div>
        <div class="d d4">4</div>
        <div class="d d5">5</div>
        <div class="d d6">6</div>
    </div>
</body>
</html>

制作六面体的总结

(1)3D旋转会改变3D坐标系,所以建议最后进行旋转动作
(2)父容器先进行一下旋转会更直观的展示效果,也利于制作
(3)transform-style要设置为preserve-3d
# 3d
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区