css 3d box 实现的一些注意事项
Test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
margin: 50px auto;
width: 200px;
padding: 200px;
perspective: 800px;
border: 1px dashed #333;
}
.box{
position: relative;
width: 200px;
height: 200px;
line-height: 200px;
font-size: 100px;
text-align: center;
color: #fff;
font-weight: bold;
border: 1px dashed #ccc;
transform-style: preserve-3d;
transform-origin: center center -100px;/*定位的方式，旋转中心点这样设置，但存在兼容性问题*/
transition: 1s;
}
.box div{
position: absolute;
width: 200px;
height: 200px;
}
.box div:nth-of-type(1){
top: -200px;
background-color: red;
transform-origin: bottom;
transform: rotateX(90deg);
}
.box div:nth-of-type(2){
left: -200px;
background-color: green;
transform-origin: right;
transform: rotateY(-90deg);
}
.box div:nth-of-type(3){
background-color: blue;
}
.box div:nth-of-type(4){
right: -200px;
background-color: #333;
transform-origin: left;
transform: rotateY(90deg);
}
.box div:nth-of-type(5){
bottom: -200px;
background-color: yellow;
transform-origin: top;
transform: rotateX(-90deg);
}
.box div:nth-of-type(6){
background-color: tan;
transform: translateZ(-200px) rotateX(180deg);
}
.wrap:hover .box{
transform: rotateX(360deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
Test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
margin: 50px auto;
width: 200px;
padding: 200px;
perspective: 800px;
border: 1px dashed #333;
}
.box{
position: relative;
width: 200px;
height: 200px;
line-height: 200px;
font-size: 100px;
text-align: center;
color: #fff;
font-weight: bold;
border: 1px dashed #ccc;
transform-style: preserve-3d;
transform-origin: center center -100px;/*定位的方式，旋转中心点这样设置，但存在兼容性问题*/
transition: 1s;
}
.box div{
position: absolute;
width: 200px;
height: 200px;
}
.box div:nth-of-type(1){
top: -200px;
background-color: red;
transform-origin: bottom;
transform: rotateX(90deg);
}
.box div:nth-of-type(2){
left: -200px;
background-color: green;
transform-origin: right;
transform: rotateY(-90deg);
}
.box div:nth-of-type(3){
background-color: blue;
}
.box div:nth-of-type(4){
right: -200px;
background-color: #333;
transform-origin: left;
transform: rotateY(90deg);
}
.box div:nth-of-type(5){
bottom: -200px;
background-color: yellow;
transform-origin: top;
transform: rotateX(-90deg);
}
.box div:nth-of-type(6){
background-color: tan;
transform: translateZ(-200px) rotateX(180deg);
}
.wrap:hover .box{
transform: rotateX(360deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
Test3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*不用麻烦设置left，top等值*/
.wrap{
margin: 0 auto;
width: 200px;
height: 200px;
padding: 200px;
border: 1px solid #333;
perspective: 800px;/*!!!*/
}
.box{
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;/*!!!*/
transition: 3s all;
transform: translateZ(-100px) rotateX(0);
}
.box div{
width: 200px;
height: 200px;
line-height: 200px;
color: #fff;
position: absolute;
font-size: 100px;
text-align: center;
}
.box div:nth-of-type(1){
background-color: red;
transform: translateZ(100px);
}
.box div:nth-of-type(2){
background-color: blue;
transform-origin: top;
transform: translateZ(-100px) rotateX(90deg);/*!!!先移到最里面再操作能保证数字是正的，然后再向前移动，然后再控制其父向后移动*/
}
.box div:nth-of-type(3){
background-color: yellow;
transform: translateZ(-100px) rotateX(180deg);/*!!!*/
}
.box div:nth-of-type(4){
background-color: green;
transform-origin: bottom;
transform: translateZ(-100px) rotateX(-90deg);/*!!!*/
}
.wrap:hover .box{
transform: translateZ(-100px) rotateX(270deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
css 3d box 实现的一些注意事项的更多相关文章
- Intro to CSS 3D transforms
原文地址:Intro to CSS 3D transforms,本文只是翻译了其中的一部分,省去了作者写文章的原因浏览器兼容部分(已经过时) Perspective 元素需要设置需要设置perspec ...
- 从css 3d说到空间坐标轴
有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好 ...
- css 3D动画
一.今天让我们来学习一下css 3D吧! 1.首先我们要学习好css3 3d一定要有一定的立体感! 2.再来那就聊聊原理吧! 3.css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d ...
- CSS 3D 的魅力
作者 | 子慕大诗人 来源 | www.cnblogs.com/1wen/p/9064011.html 前言: 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下. 在阅读 ...
- 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？
本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...
- CSS 3D的魅力
用户1093975发表于Web项目聚集地订阅 151 在这篇文章中: 前言: demo1 demo2 结语: 本文介绍了CSS来实现3D效果,并且有详细代码和解释.建议大家只字不差的阅读.本文的作者是 ...
- 一个简单的CSS3+js 实现3D BOX
<!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...
- Codrops 优秀教程：CSS 3D Transforms 实现书本效果
这个使用 CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...
- 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...
随机推荐
- Git小玩
早就听说了GitHub的强大. 一直没有机会去看, 在公司实习的几个月里也没机会接触SVN和Git, 可是抱着对Linus大神的崇敬, 和开源的崇敬之情. 趁着不忙的几天, 来学习一下Git. 希 ...
- UML类图简明教程
作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...
- 华为AI应用创新大赛即将开启！公开课已备好！
为鼓励开发者创新,挖掘前沿创新能力的应用及服务,帮开发者打造爆款应用的同时丰富终端消费者的用户体验,由设立10亿激励基金耀星计划扶持的华为创新竞赛平台即将开启. 竞赛平台将滚动推出AI.HAG.AR. ...
- JVM完全指南
JVM完全指南 一:虚拟机内存图解 JAVA程序运行与虚拟机之上,运行时需要内存空间.虚拟机执行JAVA程序的过程中会把它管理的内存划分为不同的数据区域方便管理. 虚拟机管理内存数 ...
- XP，32/64位Win7,32/64位Win8，32/64位Win10系统 【春节版】
本系统是10月5日最新完整版本的Windows10 安装版镜像,win10正式版,更新了重要补丁,提升应用加载速度,微软和百度今天宣布达成合作,百度成为win10 Edge浏览器中国默认主页和搜索引擎 ...
- 【BZOJ4241】历史研究 分块
[BZOJ4241]历史研究 Description IOI国历史研究的第一人——JOI教授,最近获得了一份被认为是古代IOI国的住民写下的日记.JOI教授为了通过这份日记来研究古代IOI国的生活,开 ...
- 该 Bucket 已存在，或被其他用户占用
- 性能测试--初识Jmeter
初识Jmeter Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动 ...
- php总结5——常量、文件上传
5.1常量 系统常量: PHP_OS 操作系统 PHP_VERSION php版本 PHP_SAPI 运行方式 自定义常量: define("常量名称"," ...
- BZOJ4920: [Lydsy1706月赛]薄饼切割
BZOJ4920: [Lydsy1706月赛]薄饼切割 Description 有一天,tangjz送给了quailty一张薄饼,tangjz将它放在了水平桌面上,从上面看下去,薄饼形成了一个H*W的 ...