css3 3d旋转图片立方体特效代码
一、什么是css3 3d旋转 ？
形成一个3D空间： transform-style:preserve-3d ( 让父元素形成3D，让其子元素在3D空间进行变化 )。
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴，Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向，2d场景，在屏幕上水平和垂直的交叉线x轴和y轴。
二、关于css 3d旋转的相关属性及使用方法
变形属性：transform
3D功能函数 —-3D的位移：transform:translate3d(x,y,z); 3D缩放：transform:scale3d(x,y,z);
translateX() scaleX()
translateY() scaleY()
translateZ() scaleZ()
3D的旋转: ransform:rotate();
rotateX() – x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
rotateY() – y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
rotateZ() //默认情况效果类似 – z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
rotate3D()
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ] – a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
注意：在translate属性值中要是填写三个值，必须加上3d，即translate3d，rotate3d，scale3d
三、css3 3d旋转图片立方体特效代码
思路分析：先在一个盒子里面设置6个面，6个面都放在盒子内部，然后分别把6个面往6个不同的方向运动，形成立方体。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
transform-style: preserve-3d; //形成3d空间）
transform:rotateX(20deg) rotateY(30deg); //为了方便观察让3D舞台转动角度
transition:2s; //为了过度看起来更舒服
}
.box div{
width:300px;
height:300px;
text-align: center;
line-height:300px;
font-size: 100px;
font-weight:bolder;
color:#fff;
position:absolute; //让6个面全部定位在父元素里面
left:0;top:0;
opacity:0.5; //透明属性
border:2px solid #000;
backface-visibility:hidden; //使背面不可见，方便自己看，也可以不设置
}
.con1{
/* 第一个面往前走 */
background:red;
transform:translateZ(150px);
}
.con2{
/* 第二个面往后走 */
background:blue;
transform:translateZ(-150px) rotateY(180deg); /*rotateY(180deg) 让正面朝外*/
}
.con3{
/* 先往上位移150px 再绕着X轴转动90deg */
background:pink;
transform:translateY(-150px) rotateX(90deg);
}
.con4{
/* 先往下位移150px,再绕着X轴转动90deg */
background:green;
transform:translateY(150px) rotateX(-90deg);
}
.con5{
/* 先往左位移150px , 再绕着Y轴转动90deg */
background:rosybrown;
transform:translateX(-150px) rotateY(-90deg);
}
.con6{
/* 先往右侧位移150px,再绕着Y轴转动90deg */
background:#000;
transform:translateX(150px) rotateY(90deg);
}
</style>
</head>
<body>
<div class=”box”>
<div class=”con1″>1</div>
<div class=”con2″>2</div>
<div class=”con3″>3</div>
<div class=”con4″>4</div>
<div class=”con5″>5</div>
<div class=”con6″>6</div>
</div>
</body>
</html>
版权声明：本文为BUhuo原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。