形成一个3D的空间
transform-style: preserve-3d;

3D在2D的基础上,多了这些内容

            位移  transform:translateZ();
旋转 transform:rotateZ()
缩放内容涉及过多,暂不讨论

立方体的效果实现

 <style>
*{
margin:0;
padding:0;
}
section{
width:300px;
height:300px;
position:fixed;
background:purple;
left:0;right:0;
top:0;bottom:0;
margin:auto;
/*让父元素转动一个角度,方便观察*/
transform:rotateX(20deg) rotateY(30deg);
/*转成3d空间*/
transform-style: preserve-3d;
}
section:hover{
background: none;
} div{
width:300px;
height:300px;
position:absolute;
left:0;top:0;
font-size:100px;
text-align: center;
font-weight: bolder;
line-height:300px;
opacity:0.7;
transition:1s
} section:hover div:nth-child(1){
transform:translateZ(300px);
background:red;
} section:hover div:nth-child(2){
transform:translateZ(-300px) rotateY(180deg);
background:orange;
} section:hover div:nth-child(3){
transform:translateX(300px) rotateY(90deg);
background:green
} section:hover div:nth-child(4){
transform:translateX(-300px) rotateY(-90deg);
background:yellow;
} section:hover div:nth-child(5){
transform:translateY(300px) rotateX(-90deg);
background:pink
} section:hover div:nth-child(6){
transform:translateY(-300px) rotateX(90deg);
background:blue;
}
</style>
1
2
3
4
5
6

1+X证书学习日志——css 3D效果+立方体效果的实现的更多相关文章

  1. 1+X证书学习日志——css 2D&过渡

    css 位移常用属性 transform:translate(x,y): transform:translateX(); transform:translateY(); 旋转属性 2d旋转: tran ...

  2. 1+X证书学习日志 —— css样式表

    ## 因为初级的内容较多,所以选了一些有用的 需要记忆的内容写下 方便日后回顾 CSS语法   选择符{属性:属性值;} ##             所有的css代码 都要放在css样式表里面    ...

  3. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  4. 1+x证书学习日志——css 基本选择符

    ##css选择符                 1:类型选择符 直接用标签名称当作选择符                     特点:选中所有同类元素                 2:id名称 ...

  5. 1+X证书学习日志——javascript基础

    js javascript js的组成: ECMAscript DOM BOM js放置的位置 <script></script> <script src="路 ...

  6. 1+X证书学习日志——DOM节点的获取

    var oBox = document.getElementById('box');//获取ID为box的节点 var aBox = document.getElementsByTagName('di ...

  7. 1+X证书学习日志——函数

    工具得特点: 1:重复性使用 2:隐藏内部原理(细节) 3:选择性应用 创建函数: 1:关键字 function 函数名称(){ } 2:字面量创建 var fn = function(){ } 3: ...

  8. 1+X证书学习日志——javascript打印九九乘法表(基础算法)

    /// 注意要给td加上宽高属性,不然就看不到啦 /// td{ width:100px; height:30px; border:1px solid red; }

  9. 1+X证书学习日志——定位

    ## 静态定位:                 position:static;    默认值,指定left/right/top/bottom/  没有作用.                 pos ...

随机推荐

  1. mark_rabbitMQ

    一.1.6 和1.7的区别 二.63跟65好像有点差异 有些jar包问题 三.预取策略 https://blog.csdn.net/hry2015/article/details/79078312 四 ...

  2. 微信小程序的跳转navigateTo()和redirectTo()用法和区别

    原文链接:https://blog.csdn.net/u013128651/article/details/79736410  wx.navigateTo({}) ,保留当前页面,跳转到应用内的某个页 ...

  3. freemarker null异常详解及兼容模式

    在读取user的时候,因为为空,报错了,错误处的代码是这样的 <#if user> 其实准确的写法应该是 <#if user??> 如果要消除错误,需要把前端代码修后成后面这种 ...

  4. OpenSSL的证书, 私钥和签名请求(CSRs)

    概述 OpenSSL是一个多用途的工具, 适用于涉及Public Key Infrastructure(PKI), HTTPS(HTTP over TLS)的用途. 这份文档提供关于OpenSSL命令 ...

  5. 搭建Bitcoin全节点

    节点搭建 1. 进入 bitcoin 选择 Choose your wallet 2. 选择 Bitcoin Core for Linux 下载 bitcoin-0.17.0.1-x86_64-lin ...

  6. Mac下epub电子书制作编辑器 : Sigil

    官方博客:https://sigil-ebook.com github项目地址:https://github.com/Sigil-Ebook V0.9.10下载:https://github.com/ ...

  7. HTTP和HTTPS概念

    HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法. HTTPS(Hypertext Transfer ...

  8. C# redis客户端帮助类

    需要在NuGet里面引用ServiceStack.Redis using ServiceStack.Redis; using ServiceStack.Redis.Generic; using Sys ...

  9. Mac删除自带的abc输入法

    1. 安装软件:https://pan.baidu.com/s/15oIzTDojpignoR5MiZ-Q1A 安装并注册 2. 进入到目录,并打开: 1. /Users/toov5/Library/ ...

  10. python初级(302) 2 easygui简单使用

    一.复习之前的两个练习,巩固计数循环和条件循环 1.系统生成一个随机数1到5,然后让用户的猜测,若猜对了,提示恭喜你,猜对了,否则提示,对不起,你猜错了(提示,1到5的随机数为:secret = ra ...