Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
137 lines (130 sloc) 3.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>css</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.cube {
width: 160px;
height: 160px;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}
.cube-face {
display: block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 4px 1px #fff;
box-sizing: border-box;
background: -webkit-linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
background: -o-linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
background: linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
}
.cube-front {
-webkit-transform: translateZ(80px);
transform: translateZ(80px);
}
.cube-back {
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.cube-left {
-webkit-transform: rotateY(90deg) translateZ(-80px);
transform: rotateY(90deg) translateZ(-80px);
}
.cube-right {
-webkit-transform: rotateY(90deg) translateZ(80px);
transform: rotateY(90deg) translateZ(80px);
}
.cube-top {
-webkit-transform: rotateX(90deg) translateZ(80px);
transform: rotateX(90deg) translateZ(80px);
}
.cube-bottom {
-webkit-transform: rotateX(90deg) translateZ(-80px);
transform: rotateX(90deg) translateZ(-80px);
}
.text {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: red;
font-weight: bolder;
font-size: 4em;
}
</style>
</head>
<body>
<div id="cube" class="cube">
<em class="text">冯</em>
<span class="cube-face cube-front"></span>
<span class="cube-face cube-back"></span>
<span class="cube-face cube-left"></span>
<span class="cube-face cube-right"></span>
<span class="cube-face cube-top"></span>
<span class="cube-face cube-bottom"></span>
</div>
<script>
;(function (global) {
'use strict'
// 宿主环境判断
var isMobile = /Mobile/i.test(navigator.userAgent)
if (!isMobile) {
alert('请用移动设备预览本页面')
return
}
// 事件注册惰性函数
var eventRegister = (function() {
if (document.addEventListener) {
return function(e, t, h) {
e.addEventListener(t, h, false)
}
}
if (document.attachEvent) {
return function(e, t, h) {
e.attachEvent('on' + t, h)
}
}
return function(e, t, h) {
e['on' + t] = h
}
})()
// 立方体 DOM 节点
var $cube = document.getElementById('cube')
function setCubePosition(obj) {
var x = obj.x
var y = obj.y
var z = obj.z
$cube.style = 'transform: rotateX(' + x + 'deg) rotateY(' + y + 'deg) rotateZ(' + z + 'deg);' +
'-webkit-transform: rotateX(' + x + 'deg) rotateY(' + y + 'deg) rotateZ(' + z + 'deg);'
}
function handleOrientation(event) {
setCubePosition({
x: event.beta * 2,
y: event.gamma * 4,
z: (event.alpha - 180) * 2
})
}
eventRegister(global, 'deviceorientation', handleOrientation)
})(window || this);
</script>
</body>
</html>
You can’t perform that action at this time.