CSS, JS는 순종적인 주사위 소스 코드를 구현합니다.
- 韦小宝원래의
- 2017-11-17 13:45:433498검색
또 다른 혜택의 물결! css와 js가 구현한 obedient dice를 받아 공부해 보세요. 무료입니다!
코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PHP中文网--骰子源码</title>
<style>
html,body,ul {margin: 0;padding: 0;}
body {perspective: 2000px;overflow: hidden;text-align: center;}
ul {
position: relative;
width: 200px;
height: 200px;
margin: 70px auto 60px auto;
-webkit-transition: preserve-3d;
-moz-transition: preserve-3d;
-ms-transition: preserve-3d;
transition: 2s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
cursor: pointer;
}
ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
list-style: none;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 200px;
}
li:nth-child(1) {
background: rgba(145, 41, 55, 0.9);
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
}
li:nth-child(2) {
background: rgba(54, 49, 46, 0.9);
-webkit-transform: rotateY(90deg) translateZ(100px);
-moz-transform: rotateY(90deg) translateZ(100px);
-ms-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
li:nth-child(3) {
background: rgba(149, 121, 123, 0.9);
-webkit-transform: translateZ(-100px);
-moz-transform: translateZ(-100px);
-ms-transform: translateZ(-100px);
-o-transform: translateZ(-100px);
transform: translateZ(-100px);
}
li:nth-child(4) {
background: rgba(102, 99, 79, 0.9);
-webkit-transform: rotateY(-90deg) translateZ(100px);
-moz-transform: rotateY(-90deg) translateZ(100px);
-ms-transform: rotateY(-90deg) translateZ(100px);
-o-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
}
li:nth-child(5) {
background: rgba(197, 113, 84, 0.9);
-webkit-transform: rotateX(90deg) translateZ(100px);
-moz-transform: rotateX(90deg) translateZ(100px);
-ms-transform: rotateX(90deg) translateZ(100px);
-o-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
li:nth-child(6) {
background: rgba(219, 184, 143, 0.9);
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
-o-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.btn{
width: 100px;
height: 50px;
line-height: 50px;
color: #fff;
background: #666;
border-radius: 5px;
border: none;
outline: none;
margin: 0 10px;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<button id="rightBtn">向右展开详情</button>
<button id="leftBtn">向左展开详情</button>
<button id="topBtn">向上展开详情</button>
<button id="downBtn">向下展开详情</button>
<script>
var box = document.getElementById('box');
var degX = 0;
var degY = 0;
document.getElementById('rightBtn').onclick = function(){
degY += 90;
box.style.cssText = "transform: rotateY("+degY+"deg)";
}
document.getElementById('leftBtn').onclick = function(){
degY -= 90;
box.style.cssText = "transform: rotateY("+degY+"deg)";
}
document.getElementById('topBtn').onclick = function(){
degX += 90;
box.style.cssText = "transform: rotateX("+degX+"deg)";
}
document.getElementById('downBtn').onclick = function(){
degX -= 90;
box.style.cssText = "transform: rotateX("+degX+"deg)";
}
</script>
</body>
</html>무료로 받아 공부해보세요! 더 좋은 소스코드는 PHP 중국어 홈페이지에서 보실 수 있습니다. 팔로우하시면 잘보실 수 있습니다~
관련 추천 :
js 오리지널 사운드를 간단하게 구현했습니다. 위챗 채팅 기능
위 내용은 CSS, JS는 순종적인 주사위 소스 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.