介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元名称=皏iewport"内容=翱矶?设备宽度,user-scalable=no"/比;
& lt;元charset=癠TF-8"祝辞
& lt; title> Document
& lt;风格类型=拔谋?css"比;
的身体,
html {
保证金:0;
高度:100%;
溢出:隐藏;
位置:相对;
}
.wrap {
位置:相对;
高度:100%;
}
.view,
.boxZ,
.box {
位置:绝对的;
左:50%;
上图:50%;
-webkit-transform-style: preserve-3d;
传输格式:preserve-3d;
}
.box {
-webkit-transform: rotateY(0度);
变换:rotateY(0度);
-webkit-animation: 36 s无限旋转线性;
动画:36 s无限旋转线性;
}
.box跨度{
位置:绝对的;
左:50%;
上图:50%;
保证金:-512 px 0 0 -512 px;
宽度:1024 px;
身高:1024 px;
text-align:中心;
-webkit-backface-visibility:隐藏;
backface-visibility:隐藏;/*
背面、角度和父级的角度相对的面是背景
*/}
.box跨度:nth-of-type (1) {
-webkit-transform: rotateY(0度)translateZ (-510 px);
变换:rotateY(0度)translateZ (-511 px);
背景:url (img/neg-x.png)不再重演;
}
.box跨度:nth-of-type (2) {
-webkit-transform: rotateY(90度)translateZ (-511 px);
变换:rotateY(90度)translateZ (-511 px);
背景:url (img/neg-z.png)不再重演;
}
.box跨度:nth-of-type (3) {
-webkit-transform: rotateY(180度)translateZ (-511 px);
变换:rotateY(180度)translateZ (-511 px);
背景:url (img/pos-x.png)不再重演;
}
.box跨度:nth-of-type (4) {
背景:url (img/pos-z.png)不再重演;
-webkit-transform: rotateY(270度)translateZ (-511 px);
变换:rotateY(270度)translateZ (-511 px);
}
.box跨度:nth-of-type (5) {
背景:url (img/pos-y.png);
-webkit-transform: rotateX(-90度)translateZ (-511 px);
变换:rotateX(-90度)translateZ (-511 px);
}
.box跨度:nth-of-type (6) {
背景:url (img/neg-y.png);
-webkit-transform: rotateX(90度)translateZ (-511 px);
变换:rotateX(90度)translateZ (-511 px);
}/*
transform-origin z轴的设置,在ios下有兼容问题
*/#{加载
位置:固定;
左:0;
上图:0;
宽度:100%;
高度:100%;
z - index: 10;
背景:# fff url (img/loading.gif)没有重演中心中心;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=發oading"祝辞& lt;/div>
& lt;脚本类型=拔谋?javascript"比;/*检测图片加载完成*/(函数(){
var imgData=https://www.yisu.com/zixun/[
“img/neg-x.png”,
“img/neg-y.png”,
“img/neg-z.png”,
“img/pos-x.png”,
“img/pos-y.png”,
“img/pos-z.png”
];
var要点=0;
(var=0;我
这篇文章主要介绍移动端css实现全景装修图的案例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
移动端全景装修图的实现实例分享
