HTML5基础加强css样式篇(css属性transform 函数(3D)3D盒子)(二十七)
2017-03-24 11:22
543 查看
1.效果图如下:
1代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
position: absolute;
top: 25%;
left: 25%;
}
#box1{
background-color: rgba(255,0,0,0.2);
}
#box2{
background-color: rgba(0,255,0,0.2);
transform-origin:center;
transform: translateZ(-150px);
}
#box3{
background-color: rgba(0,0,255,0.2);
transform-origin:bottom ;
transform: rotateX(90deg);
}
#box4{
background-color: rgba(0,255,255,0.2);
transform-origin:top ;
transform: rotateX(-90deg);
}
#box5{
background-color: rgba(255,0,255,0.2);
transform-origin:right ;
transform: rotateY(-90deg);
}
#box6{
background-color: rgba(255,255,0,0.2);
transform-origin: left ;
transform: rotateY(90deg);
}
#wapper{
margin: 0 auto;
transform-style: preserve-3d;
transform-origin: center center -75px;
position: relative;
}
</style>
</head>
<body>
<div id="wapper" >
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<div class="box" id="box4">4</div>
<div class="box" id="box5">5</div>
<div class="box" id="box6">6</div>
</div>
</body>
<script type="text/javascript">
var times=1;
var wapper= document.getElementById("wapper");
setInterval(function(){
times++;
//绕Y轴旋转
// wapper.style.transform="translateY(150px) rotateY("+45+times*6+"deg) "
//绕X轴旋转
wapper.style.transform="translateY(150px) rotateX("+45+times*6+"deg) "
},100);
</script>
</html>
1代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
position: absolute;
top: 25%;
left: 25%;
}
#box1{
background-color: rgba(255,0,0,0.2);
}
#box2{
background-color: rgba(0,255,0,0.2);
transform-origin:center;
transform: translateZ(-150px);
}
#box3{
background-color: rgba(0,0,255,0.2);
transform-origin:bottom ;
transform: rotateX(90deg);
}
#box4{
background-color: rgba(0,255,255,0.2);
transform-origin:top ;
transform: rotateX(-90deg);
}
#box5{
background-color: rgba(255,0,255,0.2);
transform-origin:right ;
transform: rotateY(-90deg);
}
#box6{
background-color: rgba(255,255,0,0.2);
transform-origin: left ;
transform: rotateY(90deg);
}
#wapper{
margin: 0 auto;
transform-style: preserve-3d;
transform-origin: center center -75px;
position: relative;
}
</style>
</head>
<body>
<div id="wapper" >
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<div class="box" id="box4">4</div>
<div class="box" id="box5">5</div>
<div class="box" id="box6">6</div>
</div>
</body>
<script type="text/javascript">
var times=1;
var wapper= document.getElementById("wapper");
setInterval(function(){
times++;
//绕Y轴旋转
// wapper.style.transform="translateY(150px) rotateY("+45+times*6+"deg) "
//绕X轴旋转
wapper.style.transform="translateY(150px) rotateX("+45+times*6+"deg) "
},100);
</script>
</html>
相关文章推荐
- HTML5基础加强css样式篇(css属性transform 函数(3D)transform-style)(二十五)
- HTML5基础加强css样式篇(css属性transform 函数(2D)时钟)(二十六)
- HTML5基础加强css样式篇(css属性transform 函数(2D)的scale(),transform-origin,skew(),translate(),rotate() )(二十四)
- HTML5基础加强css样式篇(css过渡属性简写,cubic-bezier过度曲线函数使用)(二十)
- HTML5基础加强css样式篇(css过渡属性的隐式过渡问题)(二十二)
- HTML5基础加强css样式篇(css属性border详解:图片边框border-image-slice,border-image-repeat,border-image-width(二))(三十四)
- HTML5基础加强css样式篇(css计算函数:calc())(四十七)
- HTML5基础加强css样式篇(css属性:怪异盒模型解析)(四十六)
- HTML5基础加强css样式篇(伪元素first-letter,first-line,selection和css计数函数counter,counters)(十六)
- HTML5基础加强css样式篇(文字阴影css属性:text-shadow)(四十四)
- HTML5基础加强css样式篇(css属性border圆角:border-radius)(三十五)
- HTML5基础加强css样式篇(css属性border详解(一))(三十三)
- HTML5基础加强css样式篇(盒子阴影属性:box-shadow)(三十六)
- HTML5基础加强css样式篇(animation填充属性:animation-fill-mode,播放控制属性:animation-play-state,播放顺序设置,)(三十一)
- HTML5基础加强css样式篇(css过度覆盖问题)(二十一)
- HTML5基础加强css样式篇(animation属性animation-name,animation-delay,animation-duration,等)(三十)
- HTML5基础加强css样式篇(font-family,font-size, font-style,font-variant, font-weight , font 简写属性 )(五)
- HTML5基础加强css样式篇(伸缩容器介绍和横轴对其属性 justify-content)(五十二)
- HTML5基础加强css样式篇(DOM的属性操作(对class属性值的操作 setAttribute,removeAttribute,classlist:remove,add,toggle))(七)
- HTML5基础加强css样式篇(伸缩容器属性:flex-direction, flex-wrap,flex-flow,align-items,align-content)(五十三)