Once we talked about the game of dice , There was a steps attribute + Sprite to make frame animation , This is quite good, of course , But I didn't think so at the beginning , I think it's true 3d And animation to do , This project involves a lot of spatial knowledge , Let's talk about it today , this css 3d How to play .

First on the renderings :

The basic idea : Three tier structure : Perspective container >> carrier >> Specifically 3d Images .

Perspective container : decision 3d The presentation effect of , there pespective Property receive parameter is pixel ,perspective The greater the value of , representative “ The farther away the eye is from the object of observation ”, The smaller the value. , representative “ The closer your eyes are to the object of observation

The lack of perspective attribute , It will not be possible to adjust the viewing angle .

carrier : Support bearing 3d Images

This carrier is the same as the common one html The biggest difference between tags is that they have one more attribute :transform-style:preserve-3d. Show that it supports 3d Image display .

If this attribute is missing , It's been done 3d The conversion 3d The figures will be pressed in a 2d In the plane , Unable to present 3d effect , Because the containers are flat , Even if the content is 3d It doesn't help .

Specifically 3d Images : from 2d To 3d Transformation

there 3d The images are all made by 2d From the plane image conversion , So how to switch . Need to use translateX,translateY,translateZ attribute , Of course, shorthand means translate-3d, also rotateX,rotateY,rotateZ wait until . and translate( translation ),rotate( rotate ) The specific rules of , All based on the famous reference map below : The three-dimensional coordinate chart is in progress .

The first said translate The rules of , It's not necessary to say much about it , Just look at it in contrast , for instance translateZ(-100px) In this picture, it's equivalent to the image going to -z The direction of the axis has shifted 100px, The image point is “ It's sunken into the screen 100px”.translateX,translateY And so on .

The difficulty lies in rotate, Tell you a very simple rule of judgment : The positive axis is toward the eye , Clockwise, the rotation angle is positive , Counter clockwise, the rotation angle is negative .

Or the left-handed rule : Put out your left hand , The thumb points to the positive axis , The direction of the four fingers is the forward direction of rotation , But remember it's the left hand !

Left hand brother town :

It's that simple , For example, now we are going to make a 3d dice , First of all, the six plans are placed in the center store of the three-dimensional coordinate system as shown in the above figure , They're all the same size as carriers , To be a dice , You need to make the following changes :

( notes : Carrier and 6 The length and width of each surface are 200px)

In contrast to 3d chart , We will know what's going on .

  Attach all source code :

<template>
<div class="box">
<section class="cube">
<div class="front"> front </div>
<div class="back"> Back </div>
<div class="left"> left side </div>
<div class="right"> right side </div>
<div class="top"> above </div>
<div class="bottom"> below </div>
</section>
</div>
</template> <style lang="less" scoped>
.box {
width: 100%;
height: 100%;
perspective: 500px;
} .cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
color: #ff92ff;
font-size: 36px;
font-weight: 100;
text-align: center;
line-height: 200px;
transform-style: preserve-3d;
transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);
// animation: move 8s infinite linear; @keyframes move {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
}
} div {
position: absolute;
width: 100%;
height: 100%;
border: 10px solid #66daff;
border-radius: 20px;
background-color: rgba(51, 51, 51, 0.3);
} .front {
transform: translateZ(100px);
} .back {
transform: translateZ(-100px) rotateY(180deg);
} .left {
transform: translateX(-100px) rotateY(-90deg);
} .right {
transform: translateX(100px) rotateY(90deg);
} .top {
transform: translateY(-100px) rotateX(90deg);
} .bottom {
transform: translateY(100px) rotateX(-90deg);
}
}
</style>

from css 3d When it comes to more articles on the spatial axis

  1. Intro to CSS 3D transforms

    Original address :Intro to CSS 3D transforms, This article is just a part of the translation , The browser compatibility section is omitted ( Outdated ) Perspective The element needs to be set, needs to be set perspec ...

  2. Codrops Excellent course :CSS 3D Transforms Achieve book effect

    This use  CSS 3D Transforms To achieve the effect of creative books comes from  Codrops Website . You can see two types of book design : Hardcover and paperback books . Both effects are easy to use CSS modify . Let's experience it . ...

  3. To explore the CSS Mixed mode \ The filter causes CSS 3D Failure problem

    Write a small one today CSS Demo, One about 3d Ball rotation animation , About CSS 3D, The following properties are used : { transform-style: preserve-3d; perspectiv ...

  4. CSS 3D transforms

    https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759 https://github.com ...

  5. EF Core Use SQL Call to return other types of queries ASP.NET Core 2.0 Use NLog Implement logging CSS 3D transforms cSharp:use Activator.CreateInstance with an Interface? SqlHelper DBHelper C# Thread.Abort Method really stops the thread ? Be careful ! Yours Thread.Abort The method is really

    EF Core Use SQL Call to return other types of queries   Suppose you want to SQL Write your own , Instead of using LINQ.  Need to run SQL The query returns content other than the entity object .  stay EF Core in , Another way to do this ...

  6. 10 It's a beautiful one CSS 3D Special effects

    10 It's a beautiful one CSS 3D Special effects One . summary One sentence summary : I'll have a good practice when I'm free , It can also be used as recording material Two .10 It's a beautiful one CSS 3D Special effects Transfer from or refer to :10 It's a beautiful one CSS 3D Special effects https://blog ...

  7. css 3D Animation

    One . Today let's learn css 3D Well ! 1. First of all, we should study well css3 3d There must be a certain three-dimensional sense ! 2. Let's talk about the principle ! 3.css3 3d As the name suggests, there are two 2d It's made up of business cards But not for you to build a company 2d ...

  8. CSS 3D The charm of

    author | A great poet source | www.cnblogs.com/1wen/p/9064011.html   Preface :   Recently, I played with css To build 3D effect , Write a few demo, So to summarize .  In the reading ...

  9. WebVR &amp; CSS 3D &amp; WebGL

    WebVR & CSS 3D & WebGL VR https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API https:/ ...

Random recommendation

  1. describe Linux The difference between soft link and hard link ( timing 2 minute )

    stay linux In the system , There are two kinds of links : One is called hard link (Hard Link), The other is called symbolic link or soft link (Symbolic Link). 1) Default without parameters ,ln The command creates a hard link . 2) Hard link file ...

  2. HDU 2553 n queens problem ( backtracking )

     DFS Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description ...

  3. On HTML

    Just today, I took a look at it with a try attitude HTML5, Try to get in touch with a little new knowledge , Although I didn't learn much , But it's still very exciting , I feel a lot of things are different from before , Including the creation of controls and the setting of some properties , In a word, these changes and changes ...

  4. About WIN7 It takes up a lot of memory problem svchost.exe

    svchost.exe It's used to start system services , So some  svchost.exe Too much memory , Maybe the service it started took up too much memory , So just stop and disable that service . In general, the most memory intensive service is  S ...

  5. vmware Three network formats

    Network address translation (NAT) This access mode means that the virtual machine does not occupy the local area network of the host ip, By using the NAT Function to access LAN and Internet , It means that the virtual machine can access other computers in the LAN , But other computers don't know about virtual machines . Use this ...

  6. Qt5.6.0+OpenGL Texture mapping won the first battle

    The important words are written in the front ~~ Through tonight's experiment , got it EBO You can't be casual release Of ~~~ Never release That's all right. , otherwise vao It will fail Display.h #ifndef DISPLAYWIDGET_H # ...

  7. SDP(13): Scala.Future - far from completion, It can't be used as a shake off shopkeeper

    In the previous discussions on database engine, many of the operation functions have returned scala.Future Result of type , Because I think this can be very convenient to achieve non-blocking effect . Regardless of any complex data processing operation , Just wrap them in one ...

  8. Centos build NFS Services and client access

    One . Introduction to the environment NFS Server side :192.168.200.101 NFS client :192.168.200.102 Two . Server side installation configuration 1. see rpcbind and nfs-utils Does the installation package install [root@b ...

  9. 1 - IO

    IO The next day Today's content Byte stream Character stream Byte stream In the previous learning process , We're always working on files or folders , No data was written to the file . Now we're going to start writing data into files , Or reading data from a file Byte output stream Outp ...

  10. Matlab Read ROS bag The file specifies the message data

    Recently in contact with Ros When I met some problems , How to integrate rosbag The information in the database is extracted for further processing ? Such as three-dimensional point position information , Video information ( If any ) wait . I'm going to use MATLAB Read bag Information filepath=f ...