<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>transform-style_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
body {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.cube {
position: relative;
font-size: 80px;
width: 2em;
margin: 1.5em auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-30deg) rotateY(30deg);
transform: rotateX(-30deg) rotateY(30deg);
}
.cube > div {
position: absolute;
width: 2em;
height: 2em;
background: rgba(0, 0, 0, .1);
border: 1px solid #999;
color: white;
text-align: center;
line-height: 2em;
}
.front {
-webkit-transform: translateZ(1em);
transform: translateZ(1em);
}
.top {
-webkit-transform: rotateX(90deg) translateZ(1em);
transform: rotateX(90deg) translateZ(1em);
}
.right {
-webkit-transform: rotateY(90deg) translateZ(1em);
transform: rotateY(90deg) translateZ(1em);
}
.left {
-webkit-transform: rotateY(-90deg) translateZ(1em);
transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
-webkit-transform: rotateX(-90deg) translateZ(1em);
transform: rotateX(-90deg) translateZ(1em);
}
.back {
-webkit-transform: rotateY(-180deg) translateZ(1em);
transform: rotateY(-180deg) translateZ(1em);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>
-
css立方体
2019-12-21 21:23:01css立方体 先分别给立方体六个面6个div <div class="cube"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> &...展开全文css立方体
先分别给立方体六个面6个div
<div class="cube"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> <div class="right">right</div> <div class="top">top</div> <div class="bottom">bottom</div> </div>然后css设置六个面的属性：
.cube { width: 200px; height: 200px; /*border: 1px solid red;*/ margin: 200px auto; position: relative; transform-style: preserve-3d; perspective: 1000px; transform: rotateX(30deg) rotateY(45deg); } .cube:hover{ animation: rotate 1s infinite linear; } .cube > div { width: 200px; height: 200px; text-align: center; line-height: 200px; /*background: skyblue;*/ /*margin-bottom: 10px;*/ opacity: 0.5; position: absolute; top: 0; left: 0; } .left{ background: red; transform: rotateY(90deg); margin-left: -100px; } .right { background: orange; transform: rotateY(-90deg); margin-left: 100px; } .top { background: yellow; transform: rotateX(90deg); margin-top: -100px; } .bottom { background: gray; transform: rotateX(-90deg); margin-top: 100px; } .back { background: url("../images/y.jpg"); transform: rotateZ(180deg); transform: translateZ(-100px); } .front { background: cyan; transform: translateZ(100px); } @keyframes rotate{ form{ transform: rotate3d(0,0,0,0deg); } to{ transform: rotate3d(1,1,1,360deg); } }效果图：
触摸立方体会旋转90度。
-
css 正方体
2016-08-24 16:20:00<!DOCTYPE html><...<head><meta charset="utf-8" /><...transform-style_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾...展开全文转载于:https://www.cnblogs.com/y-lin/p/5803456.html
-
html css 正方体旋转,纯CSS画出旋转的正立方体
2021-06-23 11:40:33html {background:linear-gradient(#9ed128 0%,#358b98 80...height:1000px;opacity:0.8;}.wrapper {margin-top:200px;perspective:1000px;}.cube {height:200px;width:200px;position:relative;margin:auto;transfo...展开全文html {
background:linear-gradient(#9ed128 0%,#358b98 80%);
height:1000px;
opacity:0.8;
}
.wrapper {
margin-top:200px;
perspective:1000px;
}
.cube {
height:200px;
width:200px;
position:relative;
margin:auto;
transform-style:preserve-3d;
-webkit-animation:rotate 15s infinite;
-o-animation:rotate 15s infinite;
animation:rotate 15s infinite 2s;
}
@keyframes rotate {
from {
transform:rotateY(0deg) rotateX(0deg);
}
to {
transform:rotateY(360deg) rotateX(360deg);
}
}.cube>div {
height:100%;
width:100%;
opacity:0.9;
position:absolute;
text-align:center;
background:#333;
color:#fff;
line-height:200px;
font-size:30px;
}
.plane-front {
transform:translateZ(100px);
}
.plane-back {
transform:rotateY(180deg) translateZ(100px);
}
.plane-left {
transform:rotateY(270deg) translateZ(100px);
}
.plane-right {
transform:rotateY(90deg) translateZ(100px);
}
.plane-top {
transform:rotateX(90deg) translateZ(100px);
}
.plane-bottom {
transform:rotateX(270deg) translateZ(100px);
}
.cube:hover .plane-front {
transform:translateZ(200px);
}
.cube:hover .plane-back {
transform:rotateY(180deg) translateZ(200px);
}
.cube:hover .plane-left {
transform:rotateY(270deg) translateZ(200px);
}
.cube:hover .plane-right {
transform:rotateY(90deg) translateZ(200px);
}
.cube:hover .plane-top {
transform:rotateX(90deg) translateZ(200px);
}
.cube:hover .plane-bottom {
transform:rotateX(270deg) translateZ(200px);
}
-
CSS立方体旋转动画( 实例 )
2020-11-21 11:50:46CSS立方体旋转动画展开全文3D立方体旋转动画
HTML代码如下：
<div class="cube"> <div class="boxx1" style="background-color: red;"></div> <div class="boxx2" style="background-color: orange;" ></div> <div class="boxx3" style="background-color: yellow;"></div> <div class="boxx4" style="background-color: yellowgreen;"></div> <div class="boxx5" style="background-color: skyblue;"></div> <div class="boxx6" style="background-color: purple;"></div> </div>CSS代码如下：
/* 3D立方体旋转 */ .cube{ width: 200px; height: 200px; margin: 0 auto; position: relative; /* 设置3D变形效果 */ transform-style: preserve-3d; animation: run-cube 5s linear infinite; } .cube > div{ width: 200px; height: 200px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; opacity: 0.8; } .boxx1{ transform: rotateY(-90deg) translateZ(100px); } .boxx2{ transform: rotateY(90deg) translateZ(100px); } .boxx3{ transform: rotateX(-90deg) translateZ(100px); } .boxx4{ transform: rotateX(90deg) translateZ(100px); } .boxx5{ transform: rotateY(180deg) translateZ(100px); } .boxx6{ transform: rotateY(0deg) translateZ(100px); } @keyframes run-cube { from{ transform: rotateX(0) rotateY(0); } to{ transform: rotateY(1turn) rotateZ(1turn); } }
-
html+css立方体旋转展示图片示例 demo.7z
2019-08-02 16:59:31html+css立方体旋转展示图片示例demo。 -
html设置立方体,css立方体( 原创)
2021-06-20 03:07:36#preserve {width:200px;height:200px;transform-style:preserve-3d;position:fixed;top:200px;left:200px;/* transform:rotatey(45deg) rotatex(45deg);*/animation:rotate 5s infinite alternate;... -
css立方体动画
2020-03-09 23:21:35<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li&g... -
html+css立方体特效
2019-08-20 15:48:38<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>长方体特效</title> <style type="text/css"> ul{ ... -
纯css正方体旋转
2019-09-20 15:10:05css内容 <style> * { margin: 0; padding: 0; } ._a_ { width: 100%; height: 300px; } .box { width: 200px; height: 200px;... -
css正方体旋转
2020-01-06 15:00:04CSS #solid { height: 180px; width: 180px; position: relative; margin: 200px auto; transform: rotateX(30deg)rotateY(30deg); transform-style: preserve-3d; animation: name 10s infinite; } @... -
CSS立方体基础篇之一
2015-03-17 17:42:02花了点时间把CSS3D变形研究了下，做了个立方体的实例。 1. 基础 1.1 理解坐标和旋转 参考资料：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ rotateX(angle)：... -
CSS正方体背面不可见
2020-03-16 19:54:40<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...style type="text/css"> *{margin: 0;padding: 0;} body{ /*搭建3D环境*/ tr... -
一个简单的CSS 正方体制作
2017-02-20 17:36:45test.html<!DOCTYPE html> <title>Title <link rel="stylesheet" href="css/test.css"> <p >kaekeaeaaaaaaaaaaaaaaaaaaaeeee -
html实现正方体原理,css正方体实现--（transform练习）
2021-06-09 17:49:29昨天看过在看完transform后，想做一个正方体的效果。昨天transform的笔记在这里源码在这里可以看到闭眼5秒钟脑子里预演了一遍大概咋写，然后就认为自己已经可以写出来了。今天强迫自己去用手给实现一遍，结果发现... -
CSS 3D立方体制作
2021-01-19 18:42:37无需JavaScript, imagery, canvas 或者SVG，就可以利用最新的CSS制作出3D立方体，这的确是一件让人难以想象的事情。 目前制作出来的效果，只有Firefox 3.5，Safari 3.2+，Google Chorme支持。下面来为大家列举出相关... -
纯css3 立方体
2018-10-08 16:49:48该html代码可以实现立方体，而且该立方体是用纯css3编辑的，还可以旋转。 -
CSS3 立方体
2015-07-02 10:42:28CSS3实现3D立方体动画效果，包括animation，transition，transform等属性的使用。 -
css3制作立方体旋转
2017-10-31 16:27:15css3制作立方体旋转 css3制作立方体旋转 css3制作立方体旋转 -
CSS3立方体旋转发光动画特效
2021-06-24 12:50:52CSS3立方体旋转发光动画特效是一款纯CSS3制作的3D效果的立方体翻转特效。 -
css3 3d立方体
2017-01-03 15:35:28css3 3d 立方体 -
Css3制作立方体.docx
2020-03-08 18:13:39Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的详细描述。Css3制作立方体的... -
纯css3立方体效果
2018-04-13 11:16:33本案例是纯css3编写的一个立方体效果，适合初学者学习css3，欢迎大家下载 -
CSS3立方体3D旋转加载动画特效代码
2021-03-20 01:07:58CSS3立方体3D旋转加载动画，纯CSS3代码，3D立方体组合旋转动画，3D立方体组合旋转拆分动画。 -
CSS3立方体3D旋转加载动画
2021-05-01 15:55:04CSS3立方体3D旋转加载动画，纯CSS3代码，3D立方体组合旋转动画，3D立方体组合旋转拆分动画。 -
CSS实现立方体
2020-03-07 16:09:39Css制作立方体 这周在逆战班学习了过渡(transition)，2D动画(transform)，渐变(gradient)，以及3D动画特效。让我能够敲出很多很炫很好看的动画特效。今天想讲一下如何制作一个立方体。 首先，一个立方体需要六个面，...
收藏数
5,461
精华内容
2,184