css 3d basics
Feb 11, 2017 am 11:42 AMcss3d summary
3d transform (3D deformation) (rotate skew scale translate)
Basic knowledge
perspective (viewing distance, depth of field) perspective-origin (viewpoint)
transfrom
(1) Coordinates x y z
(2) Transformation base point position transform-origin
(3)transfrom-style: preserve-3d
3D Rotate picture album
3d transform (rotate skew scale translate)
Basic knowledge
perspective (viewing distance, depth of field) perspective- origin (viewpoint)
transfrom
(1) Coordinates x y z
(2) Transformation base point position transform-origin
(3)transfrom-style:preserve-3d
3D Rotating Picture Album
It uses a relatively simple coordinate y-axis rotation. Let’s take a look at his code
html code:
<p class="kj" id="kj"> <p class="mian"><img src="img/p1.jpg" alt=""></p> <p class="mian"><img src="img/p2.jpg" alt=""></p> <p class="mian"><img src="img/p3.jpg" alt=""></p> <p class="mian"><img src="img/p4.jpg" alt=""></p> <p class="mian"><img src="img/p5.jpg" alt=""></p> <p class="mian"><img src="img/p6.jpg" alt=""></p> <p class="mian"><img src="img/p7.jpg" alt=""></p> <p class="mian"><img src="img/p8.jpg" alt=""></p> <p class="mian"><img src="img/p9.jpg" alt=""></p> </p>
First, you need to build nine boxes to put nine pictures. This is easy to understand.
css code
body{ background: #6daf39;(背景加了个颜色 主要是好看) } .xj{ perspective:600px;(这是井深) } .kj{ transition: 1s;(运动时间) transform-style:preserve-3d;(实现3d效果 当然这是非常重的) width:200px; height: 300px; margin:80px auto; position: relative; transform: rotateY(0deg) rotateX(0deg) translateZ(-275px); transform-origin: center center -275px; } .mian{ position:absolute; font-size: 50px; color:#fff; text-align: center; line-height: 300px; } .mian:nth-child(1){ width:200px; height: 300px; background: #ff2223; transform: rotateY(0deg)translateZ(275px); } .mian:nth-child(2){ width:200px; height: 300px; background: #ff2223; transform: rotateY(40deg)translateZ(275px); } .mian:nth-child(3){ width:200px; height: 300px; background: #ff2223; transform: rotateY(80deg)translateZ(275px); } .mian:nth-child(4){ width:200px; height: 300px; background: #ff2223; transform: rotateY(120deg)translateZ(275px); } .mian:nth-child(5){ width:200px; height: 300px; background: #ff2223; transform: rotateY(160deg)translateZ(275px); } .mian:nth-child(6){ width:200px; height: 300px; background: #ff2223; transform: rotateY(200deg)translateZ(275px); } .mian:nth-child(7){ width:200px; height: 300px; background: #ff2223; transform: rotateY(240deg)translateZ(275px); } .mian:nth-child(8){ width:200px; height: 300px; background: #ff2223; transform: rotateY(280deg)translateZ(275px); } .mian:nth-child(9){ width:200px; height: 300px; background: #ff2223; transform: rotateY(320deg)translateZ(275px); }
css is here, very simple;
js code
kj.onclick=function () { cishu++; var jiaodu=40*cishu; kj.style.transform="rotateY("+jiaodu+"deg)translateZ(-275px)" }
(kj) is the 3D space. If clicking kj is an effect, there must be a method or step;
3d space style rotateY (this is the up and down axis rotation) translateZ (Z is the 3D three-dimensional character axis; let Move the 3d space back 275px to find the axis position)
For more css 3d basic knowledge related articles, please pay attention to the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

What language is the browser plug-in written in?
