Rumah > Artikel > hujung hadapan web > CSS3使用3D环境实现立体魔方效果的实例代码分享
CSS3使用3D环境实现立体魔方效果的实例代码分享
- 黄舟asal
- 2017-10-23 10:15:442285semak imbas
CSS3使用3D环境实现立体魔方效果的实例代码分享
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>魔方</title>
<style type="text/css">
section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective: 800px;}
.box {width:100px;height:100px;position:relative;
transform-style:preserve-3d;
transition:4S;
transform-origin:center center -50px;
}
.box div{width: 100px;height:100px;position:absolute;color:white;font-size:50px;text-align: center;line-height:100px;}
.box div:nth-of-type(1){
background: #FF6600;;
transform:translateX(-100px) rotateY(-90deg);
transform-origin:right;
}
.box div:nth-of-type(2){
background:red ;
transform:translateY(-100px) rotateX(90deg);
transform-origin:bottom ;
}
.box div:nth-of-type(3){
background:darkviolet;
transform:translateX(100px) rotateY(90deg);
transform-origin:left;
}
.box div:nth-of-type(4){
background:yellow;
transform: translateY(100px) rotateX(-90deg) ;
transform-origin:top;
}
.box div:nth-of-type(5){
background:green;
transform:translateZ(-100px) rotateY(180deg);
}
.box div:nth-of-type(6){
background:blue;
}
section:hover .box{
transform: rotateX(270deg) rotateY(-270deg) rotateX(-270deg) rotateY(270deg) ;
}
</style>
</head>
<body>
<section>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</section>
</body>
</html>Atas ialah kandungan terperinci CSS3使用3D环境实现立体魔方效果的实例代码分享 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS中关于absoulte属性的具体分析Artikel seterusnya：css清除浮动的方法