CSS3 rotation instance learning (with 3D rotation instance)


May 04, 2021 05:00 CSS3


Table of contents


We've all seen some interactive effects on the web page, such as when you slide a mouse toward an icon or button, the icon rotates automatically for a week, which is the CSS3 rotation effect. T here is a common transform application in CSS3, and transform consists of the following: rotating rotate, twisting sew, zooming and moving translate, and matrix deformation matrix matrix. T his paper focuses on the plane rotation (2D) method and stereoscopic rotation (3D) method of CSS3. But now that you're referring to transform, get a basic idea of transform properties first:


In CSS3, transform consists mainly of the following: rotate rotation, warping skew, scaling and moving translate, and matrix deformation matrix.


1, rotation rotate(): by specifying the angle parameters to the original element to specify a 2D rotation (2D rotation), angle refers to the rotation angle, if the value set is positive means clockwise rotation, negative number is counterclockwise rotation. e.g. transform:rotate (30deg).


2, twist sew ( , ) : Sew transformation on the X-axis Y axis (slash transformation). T he first argument corresponds to the X-axis and the second parameter corresponds to the Y-axis. I f the second argument is not provided, the value is 0, i.e. there is no diagonal cut in the Y-axis direction. s kew is used to distort the element, the first parameter is the horizontal angle distortion angle, and the second parameter is the vertical angle distortion angle. The second of these parameters is optional, which defaults to 0deg.


3, zoom scale (, ): provide two parameters to perform the sx, sy) zoom vector to specify a 2D scale (2D scaling). I f the second argument is not provided, the value is the same as the first argument. S cale (X,Y) is used to scale an element, the base point of an element can be set by transform-origin, the same base point is in the center of the element; A nd X-based. For example: transform:scale (2,1.5).


4, mobile translate (,) : by the vector sx, ty) specified a 2D translation, tx is the first transition value parameter, ty is the second transition value parameter option. I f is not provided, ty is based on 0 as its value. T hat is, translate (x,y), which means that the object is panned, according to the set x,y parameter value, when the value is negative, moving the object in the opposite direction, its base point defaults to the element center point, can also be based on transform-origin to change the base point. Such as transform: translate (100px, 20px).


5, matrix deformation matrix (, , , , , ) : in the form of a six-value (a, b, c, d, e, f) transformation matrix to specify a 2D transformation, equivalent to the direct application of a .a b c d e f. transformation matrix. is to reposition elements based on horizontal (X-axis) and vertical (Y-axis), and this property value uses a matrix that involves mathematics.


To view the full transform properties, click //www.w3cschool.cn/cssref/pr-transform.html


CSS3 rotation rotate() method

In CSS3, we can use the root() method to rotate elements relative to the center origin. The rotation here is two-dimensional and does not involve the operation of three-dimensional space.

CSS3 rotation instance learning (with 3D rotation instance)
Grammar:
Transform: rotate (degrees);

Description:
A degree is the number of degrees in deg that an element rotates relative to the center origin. A mong them, deg is an abbreviation for degree. If the degree is positive, the element rotates clockwise relative to the center of the origin, and if the degree is negative, the element rotates counterclockwise relative to the center of the origin.

Example:

<style>
.demo { margin:100px auto; width:300px; height:300px; background:#ededed; border:1px dotted #ff0000; position:relative;}
.fl { width:300px; height:145px; background:#00cb99;}
.fr { width:300px; height:145px; margin-top:10px; background:#0093b4;}
.pa { position:absolute; top:75px; left:75px; width:150px; height:150px; background-color:#f2f2f2;}
</style>
<div class="demo">
     <div class="fl"></div>
     <div class="fr"></div>
     <div class="pa"></div>
</div>


The effect is as follows:

CSS3 rotation instance learning (with 3D rotation instance)

Analysis:

Here the dotted wireframe is the original position, and the blue background box is the effect of rotating clockwise for 30 degrees.


CSS3 achieves 3D rotation

Using CSS3 to create 3D rotating images, the effect is very beautiful, 3D rotation is unique in supporting shadow rotation and compatible responsive web design, so that the overall scene is very feel.

Let's start with a simple example of a 3D rotation effect:

Front: The mouse moves up and starts to rotate

CSS3 rotation instance learning (with 3D rotation instance)

In rotation: This is the effect of rotating to the back, displayed as a rotation with a translucent gradient.

CSS3 rotation instance learning (with 3D rotation instance)

Back: After rotation, add some text introduction elements to the image to enrich the element.

CSS3 rotation instance learning (with 3D rotation instance)
HTML code

<div class="photo-container">
<div class="rotate-box">
<img src="winwall.jpg"/>
<div class="text">
<h2>这是一个标题</h2>
<p>这是一段图片相关的简介内容。。</p>
</div>
</div>
</div>

CSS code

.photo-container {
perspective: 1200px; /* 透视视图 */
width:45%;
float:left;
}
.rotate-box {
position:relative;
transform-style: preserve-3d; /* 3D 转换 */
transition:1s ease; /* 转换效果持续 1秒 */
margin:10%;
}
.rotate-box img {width:100%;height:auto;}


The back text style, transparent background, and set the default to reverse 180 degrees, the secondary image is placed on the back of the image, so here we use the z-axis to control, CSS code is as follows:

.text {
position:absolute;top:0;
width:100%;height:100%;
transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */
color:#666;
text-align:center;
opacity:.06;
background:rgba(255,255,255,.9);
transition: 1s opacity;
}


Use Hover to trigger the animation

.photo-container:hover .rotate-box{
transform: rotateY(180deg);
}
.photo-container:hover .text{opacity:1}


Add a perspective shadow to the image with a pseudo-element (:after) to give the whole a 3D stereoscopic feel.

.rotate-box:after {
content:' ';
display:block;
width:100%;
height:7vw; /* vw是移动设计备窗体单位*/
transform:rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /* radial-gradient 是径向渐变 */
}


CSS3 achieves a 3D cube rotation effect


CSS3 rotation instance learning (with 3D rotation instance)


How to use it:
1, call CSS style:
<link rel="stylesheet" type="text/css" href="css/style.css" />


2, add HTML code:
Start with !-- effect html -- The !-- end of the effect html -- between the html and js code; put between the html and the body.


HTML code:

 <div class="wrap">
        <div class="box1 box">
            1</div>
        <div class="box2 box">
            2</div>
        <div class="box3 box">
            3</div>
        <div class="box4 box">
            4</div>
        <div class="box5 box">
            5</div>
        <div class="box6 box">
            6</div>
    </div>

CSS 3 code:

*{margin: 0;padding: 0;}
html,body{height: 100%;background: black;}
.wrap{
	  height: 100%;position: relative;
	  -webkit-transform-style:preserve-3d;
	  -webkit-perspective:0px;

	  -moz-transform-style:preserve-3d;
	  -moz-perspective:0px;

	  -webkit-animation:mydhua 5s ease infinite;
	  -moz-animation:mydhua 5s ease infinite;

	 

}
.box{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;
	 margin:-100px 0 0 -100px; line-height: 200px;text-align: center;font-size: 48px;color: white;
		}
.box1{
	-webkit-transform:rotatey(90deg) translatez(-100px);
	-moz-transform:rotatey(90deg) translatez(-100px);
	background: rgba(128,0,128,.5);
}
.box2{
	-webkit-transform:rotatey(90deg) translatez(100px);
	-moz-transform:rotatey(90deg) translatez(100px);
	background: rgba(255,0,255,.5);
}
.box3{
	-webkit-transform:rotatex(90deg) translatez(100px);
	-moz-transform:rotatex(90deg) translatez(100px);
	background: rgba(255,153,204,.5);
}
.box4{
	-webkit-transform:rotatex(90deg) translatez(-100px);
	-moz-transform:rotatex(90deg) translatez(-100px);
	background: rgba(0,204,255,.5);
}
.box5{
	-webkit-transform: translatez(-100px);
	-moz-transform:translatez(-100px);
	background: rgba(153,204,255,.5);
}
.box6{
	-webkit-transform: translatez(100px);
	-moz-transform:translatez(100px);
	background: rgba(0,255,255,.5);
}

@-webkit-keyframes mydhua{

	0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
	100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
}
@-moz-keyframes mydhua{

	0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
	100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
}