1+X证书学习日志——css 3D效果+立方体效果的实现
形成一个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+X证书学习日志——css 3D效果+立方体效果的实现的更多相关文章
- 1+X证书学习日志——css 2D&过渡
css 位移常用属性 transform:translate(x,y): transform:translateX(); transform:translateY(); 旋转属性 2d旋转: tran ...
- 1+X证书学习日志 —— css样式表
## 因为初级的内容较多,所以选了一些有用的 需要记忆的内容写下 方便日后回顾 CSS语法 选择符{属性:属性值;} ## 所有的css代码 都要放在css样式表里面 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- 1+x证书学习日志——css 基本选择符
##css选择符 1:类型选择符 直接用标签名称当作选择符 特点:选中所有同类元素 2:id名称 ...
- 1+X证书学习日志——javascript基础
js javascript js的组成: ECMAscript DOM BOM js放置的位置 <script></script> <script src="路 ...
- 1+X证书学习日志——DOM节点的获取
var oBox = document.getElementById('box');//获取ID为box的节点 var aBox = document.getElementsByTagName('di ...
- 1+X证书学习日志——函数
工具得特点: 1:重复性使用 2:隐藏内部原理(细节) 3:选择性应用 创建函数: 1:关键字 function 函数名称(){ } 2:字面量创建 var fn = function(){ } 3: ...
- 1+X证书学习日志——javascript打印九九乘法表(基础算法)
/// 注意要给td加上宽高属性,不然就看不到啦 /// td{ width:100px; height:30px; border:1px solid red; }
- 1+X证书学习日志——定位
## 静态定位: position:static; 默认值,指定left/right/top/bottom/ 没有作用. pos ...
随机推荐
- mark_rabbitMQ
一.1.6 和1.7的区别 二.63跟65好像有点差异 有些jar包问题 三.预取策略 https://blog.csdn.net/hry2015/article/details/79078312 四 ...
- 微信小程序的跳转navigateTo()和redirectTo()用法和区别
原文链接:https://blog.csdn.net/u013128651/article/details/79736410 wx.navigateTo({}) ,保留当前页面,跳转到应用内的某个页 ...
- freemarker null异常详解及兼容模式
在读取user的时候,因为为空,报错了,错误处的代码是这样的 <#if user> 其实准确的写法应该是 <#if user??> 如果要消除错误,需要把前端代码修后成后面这种 ...
- OpenSSL的证书, 私钥和签名请求(CSRs)
概述 OpenSSL是一个多用途的工具, 适用于涉及Public Key Infrastructure(PKI), HTTPS(HTTP over TLS)的用途. 这份文档提供关于OpenSSL命令 ...
- 搭建Bitcoin全节点
节点搭建 1. 进入 bitcoin 选择 Choose your wallet 2. 选择 Bitcoin Core for Linux 下载 bitcoin-0.17.0.1-x86_64-lin ...
- Mac下epub电子书制作编辑器 : Sigil
官方博客:https://sigil-ebook.com github项目地址:https://github.com/Sigil-Ebook V0.9.10下载:https://github.com/ ...
- HTTP和HTTPS概念
HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法. HTTPS(Hypertext Transfer ...
- C# redis客户端帮助类
需要在NuGet里面引用ServiceStack.Redis using ServiceStack.Redis; using ServiceStack.Redis.Generic; using Sys ...
- Mac删除自带的abc输入法
1. 安装软件:https://pan.baidu.com/s/15oIzTDojpignoR5MiZ-Q1A 安装并注册 2. 进入到目录,并打开: 1. /Users/toov5/Library/ ...
- python初级(302) 2 easygui简单使用
一.复习之前的两个练习,巩固计数循环和条件循环 1.系统生成一个随机数1到5,然后让用户的猜测,若猜对了,提示恭喜你,猜对了,否则提示,对不起,你猜错了(提示,1到5的随机数为:secret = ra ...