First, what is css3 3d rotation?
Forming a 3D space: transform-style: preserve-3d (so forming 3D parent element, elements are allowed to vary in the sub 3D space).
3d scenes, perpendicular to the screen in the process, out of a plurality 3d with respect to the z-axis, Z-axis: a direction close to the screen is the forward, reverse direction away from the screen, 2d scene on the screen at the line of intersection of the horizontal and vertical x and y axes.
Second, on the correlation properties and methods of use css 3d rotation
Deformation properties: transform
---- 3D 3D displacement performance function: transform: translate3d (x, y, z); 3D scaling: transform: scale3d (x, y, z);
translateX() scaleX()
translateY() scaleY()
translateZ() scaleZ()
3D rotation:
ransform: Rotate ();
rotateX () - x: is a number between 0 and 1, to describe the main elements of the vector value around the axis of rotation X;
rotateY () - y: is a number between 0 and 1, to describe the main elements of the vector value around the Y axis;
rotateZ () // default effects similar to - z: is a number between 0 and 1, to describe the main elements of the vector value around the Z axis;
rotate3D()
rotate3D (x, y, z, a) [0 does not rotate. A rotary] - a: the angle is a value, is mainly used to specify the angle of rotation of the element in the 3D space, if its value is positive, clockwise rotation of the element, whereas the counterclockwise rotation of the element.
Note: translate attribute value if the fill three values must be added 3d, namely translate3d, rotate3d, scale3d
Three, css3 3d cube rotate the picture special effects Code
Thinking Analysis: setting a box 6 inside surface, surfaces 6 are placed inside of the box, respectively, then the six faces to six different directions to form a cube.
<!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; // space 3d is formed)
transform: rotateX (20deg) rotateY (30deg); // make difficult to see the 3D rotation angle of the stage
transition: 2s; // to excessive looks more comfortable
}
.box div{
width:300px;
height:300px;
text-align: center;
line-height:300px;
font-size: 100px;
font-weight:bolder;
color:#fff;
position: absolute; // make all six surfaces positioned inside the parent element
left:0;top:0;
opacity: 0.5; // transparent properties
border:2px solid #000;
backface-visibility: hidden; // the back is not visible, look at their own convenience, may not be provided
}
.con1{
/ * The first face forward * /
background:red;
transform:translateZ(150px);
}
.con2{
/ * The second plane go backwards * /
background:blue;
transform: translateZ (-150px) rotateY (180deg); / * rotateY (180deg) so that the front facing out * /
}
.con3{
/ * First and then upward displacement 150px rotated 90deg about the X axis * /
background:pink;
transform:translateY(-150px) rotateX(90deg);
}
.con4{
/ * First downward displacement 150px, then rotated 90deg about the X axis * /
background:green;
transform:translateY(150px) rotateX(-90deg);
}
.con5{
/ * First left displacement 150px, then rotated 90deg about the Y axis * /
background:rosybrown;
transform:translateX(-150px) rotateY(-90deg);
}
.con6{
/ * First Wang Youce displacement 150px, then rotated 90deg about the Y axis * /
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>
